Javascript Fetch API Cors：未通過訪問控制檢查

Question

我正在處理一個外部api。 我想發布一些數據，所以我在標頭中設置了令牌以能夠訪問api。

我被告知我的測試來源已列入白名單http://127.0.0.1:8081/

但是我得到以下錯誤。

無法加載https://external-api.com/api/transactions/ad2d7a69-f723-4798-9fa5-a95a76d65324/document ：對預檢請求的響應未通過訪問控制檢查：“ Access-Control-當請求的憑據模式為“包括”時，響應中的“允許來源”標頭不得為通配符“ *”。

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

Answer 1

請仔細閱讀錯誤消息！ 您的域名不得與“ *”列入白名單。

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

Answer 2

在您的請求中，您在令牌頭中設置了憑據，並且請求的來源是：

Origin: http://127.0.0.1:8081

在這種情況下，只有服務器回答以下問題時，請求才會繼續：

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

否則，該請求將被瀏覽器阻止。有關更多詳細信息，請單擊此處。https : //developer.mozilla.org/zh-CN/docs/Web/HTTP/CORS#Examples_of_access_control_scenarios

特別是“帶憑據的請求”部分