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

Question

我有一个本地主机 Rest API POST 使用 Docker 在端口 8501 托管的查询：http://localhost:8501/v1/models/model:predict. I have an HTML file which runs with a JavaScript script and it is hosted at http://127.0.0.1:8887/ 使用 WebServer for 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 headers 是在 HTTP responses 上指定的，而不是请求。这显然意味着设置它们的是 HTTP 服务器，而不是客户端。

如果任意来源的脚本可以有效地向 HTTP 服务器指示后者必须接受何种请求以及来自哪个来源的请求，这将导致糟糕的跨站点安全模型。

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

简而言之，您需要将 headers 添加到您的 REST 服务在 localhost:8501 生成的响应中，而不是为您的客户端脚本创建的请求指定它们，而它们什么都不做.

Answer 2

您的 服务器 缺少 header Access-Control-Allow-Origin 响应，因为它负责允许或不允许的内容。参见 https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

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

CORS issue when calling a localhost API hosted on one port from another port

html

javascript

localhost

cors