在 Create React App 中允许访问控制来源
介绍
在 Web 应用中，浏览器使用SameSite策略来阻止跨域 XMLHttpRequest 或 Fetch 请求。简单来说，默认情况下不允许从https://main.pluralsight.com向https://api.pluralsight.com发出请求。
在本指南中，您将了解跨域资源共享 (CORS) 以及“允许访问控制源”标头的作用。借助本指南中的知识，您将发现解决与 CORS 相关的问题变得轻而易举。
了解 CORS
由于默认情况下不允许从不同的域发出请求，因此在本指南中，我们将分别使用https://main.pluralsight.com和https://api.pluralsight.com作为域 A 和 B。随着 CORS 的引入，域 A 和 B 现在可以相互共享资源，而不会被浏览器阻止。
根据维基百科，“跨域资源共享 (CORS) 是一种允许从提供第一个资源的域之外的另一个域请求网页上的受限资源的机制。”
浏览器使用两种方法来验证两个域之间共享资源的能力。
1. 简单请求
在一个简单的请求中，浏览器发送一个带有Origin标头的 GET 请求，该标头的值为请求者的域，如下所示。
Origin: https://main.pluralsight.com
然后，服务器会使用Access-Control-Allow-Origin标头进行响应，其中包含允许请求的域。这也可能是用星号 (*) 表示的通配符。
Access-Control-Allow-Origin: http://main.pluralsight.com
OR a wildcard
Access-Control-Allow-Origin: *
2. 预检请求
在这个方法中，浏览器首先向服务器（在本例中为服务器 B，[https://api.pluralsight.com](https://api.pluralsight.com)）发送一个带有OPTIONS方法的请求，以确定是否允许发送请求，因此称为预检请求。
要求
OPTIONS /
Host: api.pluralsight.com
Origin: https://main.example.com
回复
Access-Control-Allow-Origin: http://main.pluralsight.com
Access-Control-Allow-Methods: PUT, DELETE
收到响应后，服务器 A（https://main.pluralsight.com）具有与服务器 B（https://api.pluralsight.com）“对话”的必要权限，然后主请求将发送到服务器 A。（有点像派对上的保镖😉）。
Create-React-App 中的 CORS
现在您已经了解了 CORS，但是如何在 Create-React-App 中将其整合在一起？与往常一样，Create-React-App 提供了一种简单的方法来处理此问题：将代理字段添加到 package.json 文件，如下所示。在这种情况下，从服务器 A 向服务器 B 发出请求（https://api.pluralsight.com）。
"proxy": "https://api.pluralsight.com:8000",
任何 Create-React-App 无法识别的路由现在将自动代理到提供的 URL。
如果不这样做，您可能会遇到错误：
Fetch API cannot load http://localhost:4000/api/todos. No 'Access-Control-Allow-Origin'
header is present on the requested resource. Origin 'http://localhost:3000' is therefore
not allowed access. If an opaque response serves your needs, set the request's mode to
'no-cors' to fetch the resource with CORS disabled.
请注意，Create-React-App 将仅代理不具有text/html内容类型的请求。
结论
就是这样！在本指南中，您将了解什么是跨源资源共享以及浏览器如何处理跨源请求。要了解有关如何在 Create-React-App 中处理此问题的更多信息，请访问官方文档以了解更多信息。
免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！
请先 登录后发表评论 ~