從另一個端口調用托管在一個端口上的本地主機 API 時出現 CORS 問題

Question

我在端口 8501 上使用 Docker 托管了一個 localhost Rest API POST 查詢： http://localhost:8501/v1/models/model:predict 。 我有一個使用 JavaScript 腳本運行的 HTML 文件，它使用 WebServer for Chrome 托管在http://127.0.0.1:8887/ 。 我可以從我的 HTML-JS 文件中調用全局 Rest API POST 查詢，並且我的本地 Rest API 可以從 POSTMAN 中正常工作。 但是我無法從我的 HTML-JS 文件中調用我的 API。

下面是我的JS文件：

function foo() {        
    var myHeaders = new Headers();
    myHeaders.append("Content-Type", "application/json");
    myHeaders.append("Access-Control-Allow-Origin", "*");
    myHeaders.append("Access-Control-Allow-Methods", "POST");

    var raw = JSON.stringify({"instances":[[0]]});

    var requestOptions = {
        method: 'POST',
        headers: myHeaders,
        body: raw,
        redirect: 'follow'
    };

    fetch("http://localhost:8501/v1/models/model:predict", requestOptions)
        .then(response => console.log(response.text()))
        .then(result => console.log(result))
        .catch(error => console.log('error', error));

}

我收到以下錯誤：

從源 ' http://127.0.0.1:8887 ' 獲取在 ' http://localhost:8501/v1/models/model:predict ' 的訪問已被 CORS 策略阻止：對預檢請求的響應未通過訪問控制檢查：請求的資源上不存在“Access-Control-Allow-Origin”標頭。 如果不透明響應滿足您的需求，請將請求的模式設置為“no-cors”以在禁用 CORS 的情況下獲取資源。

誰能幫幫我嗎？

Answer 1

您似乎對 CORS 有所了解—— Access-Control-Allow-Origin和Access-Control-Allow-Methods標頭是在 HTTP響應上指定的，而不是requests 。 這顯然意味着設置它們的是 HTTP 服務器，而不是客戶端。

如果任意來源的腳本可以有效地向 HTTP 服務器指示什么樣的請求以及后者必須接受來自哪些來源的請求，這將導致一個糟糕的跨站點安全模型。

HTTP 服務最終通過在其服務的響應中指定適當的標頭來控制訪問，並且用戶代理驗證跨源請求，如果服務器沒有指示它允許來自不同源的請求，則它拒絕繼續為腳本提供服務from -- 響應將被丟棄並拋出錯誤。

簡而言之，您需要將標頭添加到localhost:8501 REST 服務生成的響應中，而不是為客戶端腳本創建的請求指定它們，而它們不執行任何操作。

Answer 2

您的服務器缺少響應頭Access-Control-Allow-Origin ，因為它負責允許或不允許什么。 請參閱https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS