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

我在端口8501使用Docker托管了一个localhost Rest API POST查询：。我有一个用JavaScript脚本运行的HTML文件，它托管在UsingWebServerforChrome上。我能够从HTML-JS文件中调用全局RESTAPI POST查询，而我的本地RESTAPI在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));

}

我得到以下错误：

取 "来源" “”已被CORS策略阻止：响应 飞行前请求未通过访问控制检查：否 “Access Control Allow Origin”标头出现在请求的服务器上 资源。如果不透明的响应满足您的需要，请设置请求的 模式设置为“无cors”，以获取禁用cors的资源

---

有人能帮我吗？

您似乎已经向后理解了CORS——

Access Control Allow Origin

和

Access Control Allow Methods

头是在HTTP响应上指定的，而不是在请求上指定的。这显然意味着设置它们的是HTTP服务器，而不是客户端

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

HTTP服务最终通过在其服务的响应中指定适当的头来控制访问，用户代理验证跨源请求，如果服务器未指示允许来自脚本服务的不同来源的请求，则拒绝继续执行该请求——响应将被丢弃，并引发错误

---

简而言之，您需要将标题添加到REST服务在

localhost:8501

生成的响应中，客户端脚本没有为请求指定它们，而是在它们不做任何事情的地方创建它们。

您似乎已经向后理解了CORS——

Access Control Allow Origin

和

Access Control Allow Methods

头是在HTTP响应上指定的，而不是在请求上指定的。这显然意味着设置它们的是HTTP服务器，而不是客户端

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

HTTP服务最终通过在其服务的响应中指定适当的头来控制访问，用户代理验证跨源请求，如果服务器未指示允许来自脚本服务的不同来源的请求，则拒绝继续执行该请求——响应将被丢弃，并引发错误

---

简言之，您需要将头添加到REST服务在

localhost:8501

生成的响应中，而不是为客户端脚本创建的请求指定它们，因为这些请求不做任何事情。

您的服务器在响应中缺少头

访问控制允许源文件，因为它负责允许或不允许什么。请参见
您的服务器缺少头
访问控制允许来源
，因为它负责允许或不允许什么。请参阅REST API需要发送的CORS头。我建议您使用web开发人员工具、网络和控制台选项卡查看标题并更改配置。我不记得确切的时间，但通配符并不总是有效的，您可能需要显式地设置localhost和127.0.0.1。请注意选项请求，这是JS请求CORS头的方式。我不确定“WebServer for chrome”，但如果您希望获得相同的结果，可以使用webpack dev server，如果您希望使用服务器调用而不出现“CROS”错误，则可以使用webpack dev server，其中包括一个“proxy”选项进行配置。我相信，只要稍微挖掘一下，您就可以为chrome的WebServer找到相同的解决方案。祝你好运CORS头需要由RESTAPI发送。我建议您使用web开发人员工具、网络和控制台选项卡查看标题并更改配置。我不记得确切的时间，但通配符并不总是有效的，您可能需要显式地设置localhost和127.0.0.1。请注意选项请求，这是JS请求CORS头的方式。我不确定“WebServer for chrome”，但如果您希望获得相同的结果，可以使用webpack dev server，如果您希望使用服务器调用而不出现“CROS”错误，则可以使用webpack dev server，其中包括一个“proxy”选项进行配置。我相信，只要稍微挖掘一下，您就可以为chrome的WebServer找到相同的解决方案。祝你好运