javascript - 从另一个端口调用一个端口上托管的本地主机 API 时出现 CORS 问题

Question

我有一个使用 Docker 在端口 8501 托管的 localhost Rest API POST 查询:http://localhost:8501/v1/models/model:predict 。我有一个使用 JavaScript 脚本运行的 HTML 文件，它托管在 http://127.0.0.1:8887/使用 Chrome 网络服务器。我能够从我的 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));

}

我收到以下错误:

Access to fetch at 'http://localhost:8501/v1/models/model:predict' from origin 'http://127.0.0.1:8887' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

有人可以帮我吗？

Answer 1

您似乎对 CORS 的理解有点“倒退”——Access-Control-Allow-Origin 和 Access-Control-Allow-Methods header 是在 HTTP 上指定的响应，而不是请求。这显然意味着是 HTTP 服务器设置它们，而不是客户端。

如果任意来源的脚本可以有效地向 HTTP 服务器指示后者必须接受哪种请求以及来自哪些来源，那么这将形成一个可怕的跨站点安全模型。

HTTP 服务通过在其提供的响应中指定适当的 header 来最终控制访问，并且用户代理会验证跨源请求，如果服务器未指示它允许来自不同源的请求，则用户代理将拒绝继续处理脚本是从 -- 响应将被丢弃并抛出错误。

简而言之，您需要将 header 添加到 localhost:8501 处的 REST 服务生成的响应中，而不是为客户端脚本创建的请求(它们不执行任何操作)指定它们。