Javascript Fetch API Cors:未通过访问控制检查

时间:2018-06-22 14:57:51

标签: javascript cors fetch

我正在处理一个外部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

2 个答案:

答案 0 :(得分:0)

请仔细阅读错误消息!您的域名不得与“ *”列入白名单。

必须为'http://127.0.0.1:8081'。您必须要求external-api.com重新进行检查。

答案 1 :(得分:0)

在您的请求中,您在令牌标题中设置了凭据,并且请求的来源是:

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

特别是“带有凭据的请求”部分