Javascript CORS收割台&x2018；访问控制允许原点’；向本地主机上的其他端口发出请求时丢失

我有一个节点web服务器（express）在端口

6000

上运行

当

http://localhost:6000/调用

，将

index.html

提供给客户端，该客户端有一个脚本logic.js，该脚本运行：

var xhr = new XMLHttpRequest();
var url = 'http://localhost:4000/endpoint';
xhr.open('POST', url, true);
xhr.setRequestHeader('Content-type', 'application/json');
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log('endpoint');
    callback(xhr.responseText);
  }
};
xhr.send(JSON.stringify({'key': 'value'}));

另一台express服务器正在端口

4000

上运行

服务器设置一个端点，该端点只返回请求主体提交的内容：

app.route('/segment')
  .post(bodyParser.json(), function(req, res) {
  res.set('Access-Control-Allow-Origin', '*');
  res.send(req.body);
});

当我访问

http://localhost:6000/

，我在浏览器控制台中看到：

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:4100/segment. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing)

---

有没有办法在原型设计过程中绕过此问题？

您的端点可能不提供选项HTTP方法，浏览器使用该方法检查CORS头（在发出真正的请求之前）

---

如果您在开发和生产中需要不同的CORS头，我认为最好的方法是添加一个新的后端配置选项，该选项的值为允许的来源，并从一些全局响应过滤器中为它们提供服务。

您的端点可能不提供选项HTTP方法，浏览器使用该方法来检查CORS头（在他们提出真正的要求之前）

---

如果您在开发和生产中需要不同的CORS头，我认为最好的方法是添加一个新的后端配置选项，该选项的值为允许的源代码，并从一些全局响应过滤器中为它们提供服务。

您已经设置了

xhr.setRequestHeader（'Content-type'，'application/json'）；

（经验法则：对于HTML表单的

enctype

属性而言，内容类型不是有效值，将触发预引导请求）

---

您的服务器端代码仅设置

访问控制允许源代码
头以响应POST请求。您还需要编写服务器端代码以响应飞行前选项请求。
您已经设置了
xhr.setRequestHeader（'Content-type'，'application/json'）；
，因此这是一个（经验法则：对于HTML表单的
enctype
属性而言，内容类型不是有效值，将触发预引导请求）

您的服务器端代码仅设置“Access Control Allow Origin”头以响应POST请求。您还需要编写服务器端代码以响应飞行前选项请求。
以下是解决此问题的几种方法：

最佳：CORS标头（需要更改服务器）

CORS（跨来源资源共享）是服务器表示“即使您来自不同来源，我也会接受您的请求”的一种方式。这需要服务器的合作——因此，如果您无法修改服务器（例如，如果您使用的是外部API），此方法将不起作用

修改服务器以添加标头访问控制允许来源：*以启用来自任何位置的跨来源请求（或指定域而不是*）。这将解决您的问题

第二选择：代理服务器

如果无法修改服务器，则可以运行自己的代理。如果此代理与页面不在同一个源，则可以返回Access Control Allow Origin标头

您将向代理服务器发出请求，代理服务器将把API请求转发到远程服务器，而不是向某个远程服务器发送API请求

第三选择：JSONP（需要服务器支持）

如果CORS和代理服务器不适合您，JSONP可能会有所帮助。您基本上可以使用回调参数发出GET请求：

（得到）
服务器将把JSON应答封装在回调函数调用中，您可以在其中处理它：

foo（{“your”：“json”，here:true}）
有一些缺点，值得注意的是，JSONP只支持GET请求，而且您仍然需要一个协作服务器。
以下是一些解决此问题的方法：

最佳：CORS标头（需要更改服务器）

CORS（跨来源资源共享）是服务器表示“即使您来自不同来源，我也会接受您的请求”的一种方式。这需要服务器的合作——因此，如果您无法修改服务器（例如，如果您使用的是外部API），此方法将不起作用

修改服务器以添加标头访问控制允许来源：*以启用来自任何位置的跨来源请求（或指定域而不是*）。这将解决您的问题

第二选择：代理服务器

如果无法修改服务器，则可以运行自己的代理。如果此代理与页面不在同一个源，则可以返回Access Control Allow Origin标头

您将向代理服务器发出请求，代理服务器将把API请求转发到远程服务器，而不是向某个远程服务器发送API请求

第三选择：JSONP（需要服务器支持）

如果CORS和代理服务器不适合您，JSONP可能会有所帮助。您基本上可以使用回调参数发出GET请求：

（得到）
服务器将把JSON应答封装在回调函数调用中，您可以在其中处理它：

foo（{“your”：“json”，here:true}）
还有一些缺点，特别是JSONP只支持GET请求，而且您仍然需要一个协作服务器