XMLHttpRequest无法加载XXX，没有'Access-Control-Allow-Origin'头部

Question

tl;dr; 关于同源策略

我有一个Grunt进程，它启动了一个express.js服务器的实例。直到刚才，这一切都运行得非常好，但现在它开始提供一个空白页面，并在Chrome（最新版本）的开发者控制台中的错误日志中显示以下内容：

XMLHttpRequest无法加载https://www.example.com/ 请求的资源上没有'Access-Control-Allow-Origin'头。因此，不允许来自'http://localhost:4300'的访问。

是什么阻止了我访问该页面？

Answer 1

目标服务器必须允许跨域请求。为了通过express允许它，只需处理http选项请求：

app.options('/url...', function(req, res, next){
   res.header('Access-Control-Allow-Origin', "*");
   res.header('Access-Control-Allow-Methods', 'POST');
   res.header("Access-Control-Allow-Headers", "accept, content-type");
   res.header("Access-Control-Max-Age", "1728000");
   return res.sendStatus(200);
});

Answer 2

tl;dr — 当您想要（主要）使用客户端 JS 从不同的服务器读取数据时，您需要包含数据的服务器向需要数据的代码授予显式权限。

最后有一个摘要，答案中有标题，以便更容易找到相关部分。不过，建议阅读所有内容，因为它为理解 why 提供了有用的背景，从而使了解 how 在不同情况下如何应用变得更容易。

关于同源政策

这是同源策略。它是浏览器实现的安全功能。

您的特殊情况显示了它是如何为 XMLHttpRequest 实现的（如果您使用 fetch，您将得到相同的结果），但它也适用于其他事物（例如加载到 上的图像） ; 或加载到