Javascript Fetch API Cors：未通过访问控制检查答案

【问题标题】：Javascript Fetch API Cors : Doesen't pass access control checkJavascript Fetch API Cors：未通过访问控制检查
【发布时间】：2018-06-22 14:57:50
【问题描述】：

我正在处理一个外部 api。我想发布一些数据，所以我在标题中设置了一个令牌以便能够访问 api。

我被告知我的测试来源已被列入白名单http://127.0.0.1:8081/

但是我得到以下错误。

加载失败 https://external-api.com/api/transactions/ad2d7a69-f723-4798-9fa5-a95a76d65324/document: 对预检请求的响应未通过访问控制检查：响应中“Access-Control-Allow-Origin”标头的值必须当请求的凭据模式为时，不是通配符“*” '包括'。

async submitDocument(transationId, token, base64) {

    const url = host + "/api/transactions/" + transationId + "/document"

    const body = {
        "image": base64,
    }

    let headers = new Headers();
    headers.set('Content-type', 'application/json');
    headers.set('token', token);

    const request = {
        method: 'POST',
        body: JSON.stringify(body),
        mode: 'cors',
        headers: headers,
        credentials: 'include'
    }

    const data = await fetch(url, request);
    const response = await data.json();

    return response;

}

此函数调用正在下一页的浏览器端进行。 http://127.0.0.1:8081/

来自服务器的响应

Request URL: https://externalapi.com/api/transactions/f400aaec-3fde-4458-a36e-fe03d550fc00/document
Request Method: OPTIONS
Status Code: 200 
Remote Address: 54.194.37.150:443
Referrer Policy: no-referrer-when-downgrade
Access-Control-Allow-Headers: content-type, token
Access-Control-Allow-Methods: GET,POST,PUT,DELETE
Access-Control-Allow-Origin: *
Access-Control-Max-Age: 0
Connection: keep-alive
Content-Length: 0
Date: Fri, 22 Jun 2018 15:29:27 GMT
Server: nginx
Vary: Origin
Accept: */*
Accept-Encoding: gzip, deflate, br
Accept-Language: en-GB,en-US;q=0.9,en;q=0.8
Access-Control-Request-Headers: content-type,token
Access-Control-Request-Method: POST
Cache-Control: no-cache
Connection: keep-alive
Host: externalapi.com
Origin: http://127.0.0.1:8081
Pragma: no-cache
Referer: http://127.0.0.1:8081/
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.181 Safari/537.36

【问题讨论】：

服务器未正确配置 Access-Control-Allow-Origin 标头。您能否提供响应中的确切 Access-Control-Allow-Origin 标头？

标签： javascript cors fetch

【解决方案1】：

请仔细阅读错误信息！您的域不能是带有“*”的白名单。

它必须是“http://127.0.0.1:8081”。您必须要求 external-api.com 重新检查。

【讨论】：

所以你说这个函数调用只能在特定的 url 上进行。函数调用只能在127.0.0.1:8081/test 上进行，并在127.0.0.1:8081/test 上列入白名单？
如果我希望在 /test 或 /test2 上进行此函数调用，服务器需要单独将它们列入白名单吗？
externalapi.com 用“*”将您列入白名单，这意味着每个人都可以调用和使用它们。但是由于您有凭据：包括，这对您来说还不够。他们必须将您的域列入白名单。编辑：/test 和 /test2 无关紧要
不，他们将域127.0.0.1:8081 我最初提到的列入白名单
顺便说一句，我是否需要“凭据：包含”我认为我做对了，因为我将令牌传递到标题中？

【解决方案2】：

在您的请求中，您在令牌标头中设置了凭据，并且您的请求的来源是：

Origin: http://127.0.0.1:8081

这种情况下的请求只有在服务器回答时才会继续：

Access-Control-Allow-Origin: http://127.0.0.1:8081

否则请求被浏览器阻塞在这里查看更多详细信息： https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS#Examples_of_access_control_scenarios

尤其是“带有凭据的请求”部分

【讨论】：

这个 Access-Control-Allow-Origin: 127.0.0.1:8081 是服务器端问题吗？他们没有正确配置它？
我应该请他们正确配置这个？
是的，这是服务器端的问题。