在前端开发中，跨域问题是一个常见的难点，尤其是在使用 React 开发项目时。跨域问题是由于浏览器的同源策略所导致的，即只有在同样协议、域名、端口号的网站之间才能共享资源。在以下情况中会出现跨域问题：
- 使用 AJAX、WebSockets 或者其他 HTTP 请求方式请求不同域名下的接口
- 在 iframe 中嵌入来自不同域名的网页或者资源
- 使用 CDN 或者其他第三方跨域资源
这篇文章将讲解如何解决 React 项目中的跨域问题，并提供详细的示例代码以及指导意义。
解决方案
解决跨域问题的方式有很多，包括 CORS、JSONP、反向代理等等。在 React 项目中，解决跨域问题的方式有以下几种：
设置代理
在 React 项目中，可以使用 http-proxy-middleware 中间件来设置代理。代理可以将请求转发到另一个域名，从而绕开同源策略。下面是一个在 React 项目中设置代理的示例代码：
-- -------------------- ---- -------
----- ----- - ---------------------------------
-------------- - ------------- -
--------
-------
-----------------------------
------- ------------------------
------------- -----
--
--
--上面的代码设置了一个代理，将所有 /api 开头的请求都转发到另一个域名。其中 target 参数指定了转发目标的域名和端口号，changeOrigin 参数表示是否修改请求头中的 Host 属性为目标域名。这样就可以让请求绕开同源策略，并且更加灵活地管理请求。
使用 JSONP
JSONP 是一种跨域解决方案，它利用了 script 标签可以跨域加载资源的特点。在 React 项目中，可以通过定义一个回调函数来接收跨域请求的响应数据。下面是一个在 React 项目中使用 JSONP 的示例代码：
-- -------------------- ---- -------
-------- ----------------- --------- -
----- ------ - ---------------------------------
---------- - ----
---------------- - -------------- -
---------------
----------------------------------
--
----------------------------------
-
---------------------------------------------------------------- -------------- -
------------------
---上面的代码定义了一个 getJsonpData 函数，它接收一个 url 和一个回调函数。在函数中，创建了一个 script 标签，并设置了 src 属性为目标 url，其中 url 中包含了一个回调函数名。将回调函数定义在全局作用域中，当 script 标签加载完成后调用回调函数，并将响应数据传递到回调函数中。最后删除 script 标签。这样就可以轻松实现跨域请求了。
在响应头中设置 CORS
CORS 是一种由 W3C 标准化的跨域解决方案，它通过在服务器端设置响应头中的 Access-Control-Allow-Origin 属性来实现跨域。在 React 项目中，可以在请求头中设置 withCredentials 参数为 true，以便携带跨域请求的 cookie。下面是一个在 React 项目中使用 CORS 的示例代码：
-- -------------------- ---- -------
------------------------------------ -
------- ------
------------ ----------
--
-------------- -- -
----------------------
--
------------ -- -
---------------------
---上面的代码使用了 Fetch API 来发起跨域请求。在请求头中设置了 credentials 为 include，以便携带 cookie。在服务器端设置响应头的 Access-Control-Allow-Origin 属性为请求域名即可。这样就可以让跨域请求实现了。需要注意的是，在生产环境中使用 CORS 时，需要设置响应头中的 Access-Control-Allow-Credentials 为 true。
总结
跨域问题是前端开发中的一个难点，但是使用了这些跨域解决方案之后，就可以轻松地绕开同源策略，实现跨域请求了。在 React 项目中，使用代理、JSONP 或者 CORS 都可以实现跨域请求。需要根据实际情况选择使用。同时，在设置跨域请求时也需要注意安全性，以免出现安全隐患。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64730830968c7c53b008ec7d