什么是CORS政策？

CORS政策，即跨源资源共享政策，出于安全考虑，防止从网站所运行的服务器以外的来源访问网络资源。

访问资产

对于大多数网站来说，他们使用的所有资产（图像、文本、文件等）都保存在网站托管的同一个服务器上。由于一个网站应该得到托管它的服务器的信任，该网站被允许使用由托管服务器持有的资源。这被称为同源策略，因为网站和资产都有相同的来源，即它们所在的服务器。

另一台服务器上的资产

想象一下，你想让一个网站调用另一台服务器上的信息。这可以通过fetch() JavaScript函数轻松实现。

// gets the text written by the server and prints it in the console
fetch("url_of_server").then(req => req.text()).then(console.log)

通过上述GET请求，我们可以访问存储在我们目标服务器上的信息。

为什么CORS是重要的

现在我们可以通过GET请求从另一个服务器上获得任意数据，我们同样可以通过发送DELETE、POST或UPDATE请求在服务器上改变或修改这些数据。

服务器需要一种方法来确保恶意网站不能窃取或破坏受保护的信息，同时仍然允许访问被批准的网站。

模拟 CORS

我们可以通过制作一个简单的网络服务器来看看这是如何工作的。尝试用这个repl.it链接运行这个Node.js服务器。

//This is the template Node.js code provided by repl.it
var http = require('http');
//create a server object:
http.createServer(function  (req, res)  {
	res.write('Section is cool');  //write a response to the client
	res.end();  //end the response
}).listen(6003);  //the server object listens on port 6003

如果你有Node.js，我建议在本地运行这个代码。

为了测试网络服务器，在一个网站上打开浏览器的控制台（比如这个网站），然后输入。

fetch("https://cors1--nadivgold.repl.co/").then(req=> req.text()).then(console.log)

如果你使用的是Node.js的本地版本，请使用。

fetch("http://localhost:6003").then(req => req.text()).then(console.log)

在控制台中运行这个fetch() 命令，就像网站在发送请求一样。

你应该在你的控制台看到一个 CORS 错误，看起来像。

cors console error
我们试图请求的资产是来自 Node.js 网络服务器的字符串 "Section is cool"。我们的请求被阻止了，因为服务器没有明确给予我们的网站权限。

为了解决这个问题，我们可以在我们的网络服务器上添加 "Access-Control-Allow-Origin"。这个HTTP头让CORS知道我们是可以让别人请求资产的。只需将

res.setHeader("Access-Control-Allow-Origin",  "*")  //sets the allow use to all requests html header

到 Node.js 服务器上，或者使用这个新的 repl.it 链接。

第二个参数中的星形符号表示接受所有请求。如果我们只想给一个网站的访问权，用该网站的URL替换星号。

现在我们可以运行和上面一样的获取请求来访问我们的字符串。

如果你使用的是新的repl.it版本，就用这个fetch代替。

fetch("https://cors2--nadivgold.repl.co/").then(req => req.text()).then(console.log)

现在我们应该在控制台中看到Section is cool 。

总结

在处理 CORS 时，最重要的事情是负责任地喝酒：)第二件最重要的事情是，如果你需要另一个服务器的东西，你也需要那个服务器的许可。