CORS标头“访问控制允许来源” localhost上

问题描述：

制作到不同的端口的请求时缺少我有一个节点的网络服务器（表达）在端口6000运行。CORS标头“访问控制允许来源” localhost上

当调用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'}));

有端口4000运行的另一个Express服务器。

服务器建立它简单的返回请求主体提交的内容端点：

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)

有在原型制作过程中绕过这一点的一种方式？

答

你的终点可能不提供其使用的浏览器来检查CORS标头（他们让真正的请求之前）的OPTIONS HTTP方法。

如果您需要在研发和生产不同的CORS头，我认为最好的办法是增加一个新的后端配置选项与允许起源的价值和一些全球响应滤波器为他们服务。

答

您已设置xhr.setRequestHeader('Content-type', 'application/json');所以这是一个preflighted request（经验法则：内容类型是不是为enctype属性的HTML表单将触发预检请求的有效值）。

你的服务器端代码只设置Access-Control-Allow-Origin头以响应POST请求。您需要编写服务器端代码来响应预检OPTIONS请求。

答

下面是解决这个问题的一些方法：

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

CORS（跨来源资源共享）是服务器说的方式“我会接受你的请求，即使你来自不同的来源。“这需要服务器的合作 - 所以如果你不能修改服务器（例如，如果你使用的是外部API），这种方法将不起作用。

修改服务器添加页眉访问控制允许来源：*从任何地方实现跨域请求（或指定域名，而不是*）。这应该可以解决你的问题。

第二选择：代理服务器

如果不能修改服务器，你可以运行自己的代理。如果这个代理与您的页面不在同一个原始位置，它可以返回Access-Control-Allow-Origin标头。相反，发送API请求一些远程服务器的

，你会是请求您的代理，将它们转发到远程服务器。这里有几个代理选项。

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

如果CORS和代理服务器不为你工作，JSONP可能会有帮助。你基本上是做一个回调参数的GET请求：

（获得）http://api.example.com/endpoint?callback=foo 服务器将包装在一个函数调用中的JSON回复您的回调，在那里你可以处理它：

富（{“你“：”json“，here：true}）有一些缺点，特别是JSONP仅支持GET请求，并且您仍然需要协作服务器。

CORS标头“访问控制允许来源” localhost上

相关推荐