什么是跨域问题？
在前端开发中，同源策略是一种重要的安全机制，它限制了来自不同源站点的 Web 应用程序之间的交互。同源策略要求 Web 应用程序只能访问与其本身同源的资源，即协议、域名和端口必须完全相同。
而当我们需要访问不同源的资源时，就会引发跨域问题。在 React 项目中，我们通常会与后端 API 进行交互，而 API 往往会存在不同源的情况，这时候就需要解决跨域问题。
解决方案
JSONP
JSONP 是一种前端跨域请求的解决方案，通过动态添加 <script> 标签实现数据的加载。JSONP 请求不使用 XMLHttpRequest 对象，而是通过在页面上添加一个 <script> 标签，向服务器请求 JSON 数据，服务器返回一段 JavaScript 代码，该代码会调用由前端指定的一个函数，并将 JSON 数据作为参数传递进去。因为 JSONP 请求是通过 <script> 标签来发起的，所以并不受同源策略的限制。
但是 JSONP 请求的缺点也很明显，它只支持 GET 请求，且无法进行原生的错误处理，容易受到 XSS 攻击。
CORS
CORS（Cross Origin Resource Sharing）是 W3C 标准，它是一种新的跨域解决方案。CORS 定义了新的 HTTP 头部字段，允许服务器进行指定的方法和域的访问控制。
在前端代码中，我们只需要在请求时设置请求头部即可：
-- -------------------- ---- -------
------------------------------- -
------- ------
----- -------
-------- -
------------------------------ ----
--------------- ------------------
-
--
-------------- -- ----------------
---------- -- ------------------
------------ -- -------------------其中，Access-Control-Allow-Origin 字段指定了允许跨域请求的源站点，mode 字段设置为 cors 表示启用 CORS。
CORS 解决方案可以支持跨源的复杂请求，如使用 DELETE、PUT、PATCH 方法，发送 JSON 数据等。同时，CORS 服务器在接收到请求时，还可以通过验证 Origin 字段，对发起请求的站点进行认证。
反向代理
反向代理是一种在服务器端进行跨域访问控制的方案，它的核心思想是将需要访问的 API 接口转发到后端自己的域名下。对于前端来说，只需要将接口请求地址设置为自己的域名，就能够访问到接口数据了。
常见的反向代理服务器有 Nginx、Apache 等。在 Nginx 中，添加反向代理配置如下：
server {
listen 80;
server_name api.example.com;
location / {
proxy_pass http://backend.example.com;
}
}以上配置将 api.example.com 转发到 backend.example.com 上。在前端代码中，只需要使用 http://api.example.com 作为接口请求地址即可。
总结
React 项目中解决跨域问题，有多种做法，其中 JSONP 和 CORS 是常用的两种方案。如果 API 接口比较复杂，建议使用 CORS 方案，它可以很好地支持跨源复杂请求。如果仅仅是访问一下第三方服务的接口，使用 JSONP 方案比较适合。如果需要在服务器端进行更细粒度的访问控制，使用反向代理方式即可。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6465fafc968c7c53b06a6b9f