从另一个端口调用托管在一个端口上的 localhost API 时出现 CORS 问题答案

【问题标题】：CORS issue when calling a localhost API hosted on one port from another port从另一个端口调用托管在一个端口上的 localhost API 时出现 CORS 问题
【发布时间】：2020-02-19 03:17:26
【问题描述】：

我有一个使用 Docker 在端口 8501 托管的 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://localhost:8501/v1/models/model:predict' 来自原点 “http://127.0.0.1:8887”已被 CORS 策略阻止：响应预检请求未通过访问控制检查：否请求中存在“Access-Control-Allow-Origin”标头资源。如果不透明的响应满足您的需求，请设置请求的模式为“no-cors”以获取禁用 CORS 的资源。

谁能帮帮我？

【问题讨论】：

CORS 标头需要由 REST API 发送。我建议使用您的 Web 开发人员工具、网络和控制台选项卡来查看标题并更改配置。我不记得确切的时间，但通配符并不总是有效，您可能需要明确设置 localhost 和 127.0.0.1 为允许的。记下 OPTIONS 请求，这就是 JS 请求 CORS 头的方式。
我不确定 'WebServer for chrome' 但如果你希望获得相同的结果，你可以使用 webpack-dev-server，如果你愿意，可以在配置中包含一个 'proxy' 选项使用服务器调用而不会出现“CROS”错误。我敢肯定，只要稍微挖掘一下，您就可以为 chrome 的 WebServer 找到相同的解决方案。祝你好运！

标签： javascript html cors localhost

【解决方案1】：

您似乎对 CORS 的理解倒退了——Access-Control-Allow-Origin 和 Access-Control-Allow-Methods 标头是在 HTTP responses 上指定的，而不是在 requests 上指定的。这显然意味着设置它们的是 HTTP 服务器，而不是客户端。

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

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

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

【讨论】：

【解决方案2】：

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

【讨论】：