ajax - 带有 CORS 和自定义标头的 AJAX 请求

Question

是的，CORS 和 ajax 请求的另一个问题:)

我在网上做了很多，但我仍然被一个预检请求卡住了，它得到了 401 Unauthorized 响应。它必须与添加的自定义标头（x-access-token）一起使用，因为不使用它的查询正在工作。任何帮助将不胜感激。

上下文
托管在 127.0.0.1:3000 的 SPA (react/webpack)，托管在 127.0.0.1 的模拟 Web 服务 (php/wamp)

预检请求标头

OPTIONS /mock/getVisitList HTTP/1.1
Host: 127.0.0.1
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:82.0) Gecko/20100101 Firefox/82.0
Accept: */*
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate
Access-Control-Request-Method: GET
Access-Control-Request-Headers: x-access-token
Referer: http://127.0.0.1:3000/visitList
Origin: http://127.0.0.1:3000
DNT: 1
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache

响应标头

HTTP/1.1 401 Unauthorized
Date: Fri, 30 Oct 2020 19:02:18 GMT
Server: Apache/2.4.41 (Win64) PHP/7.3.12
X-Powered-By: PHP/7.3.12
Access-Control-Max-Age: 1000
Access-Control-Allow-Origin: http://127.0.0.1:3000
Access-Control-Allow-Methods: POST, GET, PUT
Access-Control-Allow-Headers: x-access-token, content-type
Content-Length: 0
Keep-Alive: timeout=5, max=98
Connection: Keep-Alive
Content-Type: text/html; charset=UTF-8

.htaccess

Header set Access-Control-Max-Age "1000"
Header add Access-Control-Allow-Origin "http://127.0.0.1:3000"
Header set Access-Control-Allow-Methods "POST, GET, PUT"
Header set Access-Control-Allow-Headers "x-access-token, content-type"

RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule . index.php [L]

JS方法

const getVisits = async(token) => {
    try {
        const fetchResponse = await fetch(
            `${baseUrl}getVisitList`,
            {
                method: 'GET',
                headers: {
                    'x-access-token': token
                }
            }
        )
        switch(fetchResponse.status) {
            case 200:
                const data = await fetchResponse.json()
                return data
            case 401:
                console.log('Unauthorized')
                return null;
            default:
                console.log('Unhandled status at getVisits', fetchResponse.status)
                return []
        }
    } catch(error) {
        console.log('getVisits on error', error)
        return []
    }
}

标签： ajaxcors