不幸的是,来自 Wikipedia 的规范定义并没有让我深入了解 CORS 是什么,以及这项技术的存在需要我采取哪些实际行动。但是在学习 NodeJS 中的服务器端编程的一开始,我就不得不处理这个问题。
在客户端,我有以下测试代码,从中可以清楚地看出服务器正在1337
本地主机端口上运行:
fetch("http://localhost:1337/api/products").
then(async(response: Response): Promise<unknown> => {
console.log(response);
return response.json();
}).
then((parsedJSON: unknown): void => {
console.log(parsedJSON);
}).
catch((error: Error): void => {
console.error(error);
});
同时,另一个静态服务器负责在应用程序的新版本运行时重新加载浏览器页面3000
。在这里,HTTP
NodeJS 模块将在这种情况下响应尝试发送请求http://localhost:1337/api/products
:
Access to fetch at 'http://localhost:1337/api/products' from origin 'http://localhost:3000'
has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the
requested resource. If an opaque response serves your needs, set the request's mode to
'no-cors' to fetch the resource with CORS disabled.
对技术的实际理解开始从这条信息中建立。我相信,如果在生产中服务器为主机服务example.com
,那么请求将是"http://example.com/api/products"
。在这里,据我了解,服务器不高兴他http://localhost:3000
在服务时收到了请求http://localhost:1337
。
我确信可以以一种或另一种方式禁用此检查,但即使在本地开发环境中,出于安全原因最好不要这样做。我想大多数时候我们不希望请求来自任何地方。这就引出了一个问题:在服务器端应该按照什么原则来配置CORS?
如果你的语言不是 NodeJS 也没关系,我对这个概念很感兴趣,我会负责它在 NodeJS 中的实现。
我对这个问题了解不多,但很大程度上取决于您希望将谁以及如何传递给服务器(什么请求,从哪里)......我不要求奖励,所以只需点击链接并阅读小心。 https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS - 英语 https://developer.mozilla.org/ru/docs/Web/HTTP/CORS - 俄语
可能值得玩一下预先请求。
曾几何时,浏览器不允许您控制对服务器的请求。您只能在网站上放置链接或表格。只有 GET 或 POST 请求不能访问标头。这让一些开发人员相信,来自浏览器的其他请求永远不会得到满足。
现在我们可以通过编写一些 js 代码从浏览器发送任何 HTTP 请求。为了不让那些没想到会发生这样的事件的人感到不安,CORS 涵盖了新功能。如果我们想不通过链接或表单向另一个站点发送请求,那么浏览器将检查该站点是否已准备好迎接这一轮事件。如果站点未发送允许访问的标头,则浏览器认为该站点尚未准备好,并以错误完成请求。
重要的是要了解所有这些仅在浏览器中有效。如果您以其他方式(例如 curl)执行请求,则可以安全地忽略响应中发送的限制。也就是说,CORS 不会因无关请求而关闭您的站点。CORS 仅限制来自浏览器的请求。
那为什么需要它呢?如果您的网站 (api) 的组织考虑到世界上任何人都可以以任何方式访问它(为此您需要互联网),那么 CORS 只是一个烦人的拐杖。我想不出一个 CORS 限制能真正解决的问题。如果您需要限制对资源的访问,那么您需要使用各种授权工具和防火墙。使用令牌来防止 CSRF。
如果您了解它的工作原理,我建议您允许所有内容和所有人(
Access-Control-Allow-Origin: *
等等)。如果 HTTP 和浏览器-服务器交互对您来说有点神秘,那么您可以限制对您自己域的访问。无论您选择什么,您都需要将标头添加
Access-Control-Allow-Origin
到 GET 和 POST 句柄(如果您要从浏览器 js 访问它们),添加一个(或多个)句柄来处理 OPTIONS 请求(详细信息可以在mdn doc中找到) .