跨域问题是前后端分离开发中常遇到的问题。当使用 React.js 构建单页面应用（SPA）时，使用 AJAX 请求跨域资源的需求也相应增加，受到浏览器同源策略的限制，跨域请求会受到阻碍。本文将介绍几种解决 React.js 跨域问题的方案。
1. 使用 JSONP 跨域
JSONP 是一种利用 script 标签进行跨域请求的方法，需要服务端支持接收 JSONP 格式的数据。React.js 中通过生成 script 标签，向服务端请求 JSONP 数据。代码示例如下：
-------- ---------- --------- -
----- ------ - ---------------------------------
---------- - ----
------------ - -----
-- ------------
---------------- - -------------- -
-------------------------------------------------------------
------ -----------------
---------------
--
-------------------------------------------------------------
-
-- --
-------------------------------------------------------- -------------- -
------------------
---这样可以实现跨域请求并获取数据。
2. 使用 CORS 跨域
CORS 是跨域资源共享（Cross-Origin Resource Sharing）的简称，可以通过设置 HTTP 头部实现浏览器跨域请求，需要服务端支持。React.js 中使用 AJAX 进行跨域请求时需要在请求头部加上 Access-Control-Allow-Origin 字段，以允许跨域请求。代码示例如下：
----- --- - --- -----------------
--------------- ---------------------------
------------------- - -----
--------------------------------------------------- -----
---------------------- - ---------- -
-- --------------- --- - -- ---------- --- ---- -
------------------------------
-
--
-----------这个示例中 Access-Control-Allow-Origin 字段的值为 *，意为允许任意来源的请求。在实际使用中应该根据实际情况进行设置，例如允许特定的域名或 IP。
3. 使用代理跨域
代理跨域是将 AJAX 请求发送到同域服务端，由服务端代为请求跨域资源。React.js 中可以使用 http-proxy-middleware 模块实现代理跨域。代码示例如下：
----- ----- - ---------------------------------
-------------- - ------------- -
--------------- -------
------- ---------------------
------------- -----
------------ -
-------- -------
-
----
--这个示例中 /api 在 React.js 中用于请求跨域数据，该请求会被转发至 http://example.com/data，并返回响应数据。changeOrigin 字段表示是否改变请求头中的 origin 字段，pathRewrite 字段表示转发请求时针对请求路径进行替换。需要注意的是，需要执行一些额外配置才能使该方法正常工作，比如使用 create-react-app 的话，需要在 package.json 中添加配置：
-------- --------------------
总结
React.js 中通过 JSONP、CORS 和代理三种方式可以实现跨域请求。需要注意的是，使用 JSONP 只能进行 GET 请求，而 CORS 和代理方式则可以进行 GET 和 POST 请求。实际开发中可以根据具体需求选用不同方式。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64979dde48841e989449ba59