跨域请求是指在 Web 应用程序中，客户端通过 Ajax 或 Fetch 等方式请求另一个不同源的服务器上的资源时，出现了浏览器安全机制的限制。React 是一种流行的 JavaScript 库，用于构建用户界面。在 React 项目中，处理跨域请求是一个常见的问题。本文将介绍如何在 React 项目中处理跨域请求并解决这个问题。
为什么会出现跨域请求的问题？
出现跨域请求的问题是因为浏览器的安全机制，防止在一个域名下的网页去请求另一个域名下的资源。例如，在一个存放在 http://localhost:3000 的 React 应用中，如果尝试使用 Ajax 请求 http://api.example.com/getData，那么浏览器会拦截该请求并抛出一个错误。
这种浏览器的安全机制称为 Same-Origin Policy（同源策略），是保护 Web 应用的重要机制。但有些场景下，需要跨域请求其他服务器上的资源，该怎么处理呢？
处理跨域请求的方法
通常有三种方法可以处理跨域请求：使用代理服务器、使用 JSONP 或者跨域资源共享（CORS）。
1. 使用代理服务器
代理服务器的原理是在你本地启用一个服务器，通过代理服务器请求要跨域的服务器，然后再将请求的数据返回给前端。这种方式可以绕过浏览器的安全限制，解决跨域请求的问题。
举个例子，在 React 项目中可以使用 http-proxy-middleware 这个中间件来实现代理服务器的功能。首先安装中间件：
--- ------- --------------------- ------
然后在 src/setupProxy.js 文件中配置代理服务器：
----- - --------------------- - - ---------------------------------
-------------- - ------------- -
--------
-------
-----------------------
------- -------------------------
------------- -----
--
--
--上述代码表示，使用代理服务器请求 /api 下的资源时，将请求转发到 http://api.example.com 上。changeOrigin 选项是必需的，它会将源头改回请求的地址（即 http://localhost:3000），否则请求的源头会被替换成代理服务器的地址，导致跨域请求失败。
2. 使用 JSONP
JSONP 是一种基于 script 标签的跨域请求方式，和 Ajax 不同，JSONP 的返回结果需要在回调函数中处理。因为 script 标签无法获取返回数据，所以需要将返回结果包裹在一个函数中，前端通过回调函数获取数据。
在 React 中，可以将 JSONP 封装成一个组件，方便调用：
------ ------ - --------- --------- - ---- --------
-------- ------- ---- ------------- -------- -- -
----- ------ -------- - -----------
------------ -- -
----- ------ - ---------------------------------
---------- - ------------------------- --- -- - --- - ------------------------------
----------------------------------
------ -- -- -
----------------------------------
--
-- -------------- ------
-------------------- - ------ -- -
--------------
--
------ ----------------------
-
------ ------- ------上述组件通过动态创建 script 标签的方式加载跨域脚本资源，并使用回调函数获取数据。在使用这个组件时，可以像下面这样调用：
------ ----- ---- ----------
-------- ----- -
------ -
-----
------ --------------------------------------------- ---------------------
------- -- -
------ -
----
---------------- -- -
--- ------------------------------
---
-----
--
--
--------
------
--
-
------ ------- ----上述代码通过传入跨域接口的 URL 和回调函数的名称来生成 JSONP 请求。注意，URL 必须指定为 JSONP 接口，并在请求参数中包含 jsonp 字段，如 http://api.example.com?jsonp=?&data=xyz。
3. 使用 CORS
CORS（Cross-Origin Resource Sharing，跨域资源共享）是一种跨域请求资源的标准。它允许 Web 应用程序从不同的域名或端口请求资源，也是解决跨域请求问题的一种重要方式。
在 React 项目中，CORS 框架可以选择使用 cors 这个 npm 模块。使用方法如下：
首先，安装 cors 模块：
--- ------- ---- ------
然后在后端代码（如 Node.js）中启用 CORS：
----- ------- - ------------------- ----- ---- - ---------------- ----- --- - ---------- ----------------
上述代码表示，在所有请求中启用 CORS，允许跨源访问资源。
总结
处理跨域请求是 Web 开发中一项常见的任务，本文介绍了三种处理跨域请求的方式：使用代理服务器、使用 JSONP 和使用 CORS。在 React 项目中，可以根据实际需求来选择合适的方式。要注意的是，CORS 是跨域请求的标准解决方案，最好在开发中优先考虑使用它。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/65a20793add4f0e0ffa1a170