在前端开发中，跨域请求是经常会遇到的问题，特别是在使用 React 开发时。跨域请求的产生是由于浏览器的同源策略（Same Origin Policy）所限制。同源策略是浏览器的安全特性之一，它约束了一个源（即协议、主机名和端口号相同）下的文档或脚本只能够访问同源下的文档或脚本。
在正常情况下，跨域请求是被限制的，如果需要进行跨域请求，我们需要进行一些额外的设置。接下来，我将为大家介绍一些在 React 中处理跨域请求的方法。
1. 使用 JSONP
JSONP（JSON with Padding）是一种跨域请求的方式，它的原理是利用 script 标签的 src 属性没有跨域限制来进行数据传输。在 React 中，我们可以通过使用第三方库（如 axios-jsonp 或 jsonp）来实现 JSONP 请求。下面是一个简单的 JSONP 请求示例：
-- -------------------- ---- -------
------ ----- ---- --------
----- ---------- - ------ -- -
----- --- - ------------------------------------------------------------------------
---------- ----- ----- ----- -- -
-- ----- -
---------------------------
- ---- -
------------------
-
---
--2. 设置代理
另一种处理跨域请求的方式是通过设置代理。使用代理可以将一个请求发往本地服务器，在本地服务器上进行请求并返回数据，绕过跨域限制。在 React 中，我们可以使用 create-react-app 自带的代理功能或者通过编写自定义中间件来实现代理。
2.1 使用 create-react-app 自带的代理
create-react-app 是一个用于快速搭建 React 应用的脚手架，它自带了代理功能。我们可以在 package.json 文件中的 "proxy" 字段中添加代理服务器的地址，在发送请求时，create-react-app 会将请求转发给代理服务器。
{
"name": "my-react-app",
"dependencies": {
"react": "^16.13.1",
"react-dom": "^16.13.1"
},
"proxy": "https://api.example.com"
}2.2 编写自定义中间件
如果我们需要更加灵活地控制代理的行为，可以编写自定义中间件来实现代理功能。下面是一个简单的代理中间件示例：
-- -------------------- ---- ------- ----- ------- - ------------------- ----- --------- - ---------------------- ----- --- - ---------- ----- ----- - ------------------------------ --------------- ----- ---- -- - ----- --- - ------------------------- - ---------------- -------------- ---- - ------- --- --- --- ---------------- -- -- - ------------------- -- --------- -- ---- -------- ---
在这个例子中，我们使用 express 和 http-proxy 来创建一个简单的代理服务器。当请求以 /api 开头时，我们通过代理服务器将请求转发给我们设定的目标服务器。
3. CORS 跨域资源共享
CORS（Cross-Origin Resource Sharing，跨域资源共享）是一种跨域请求的标准，它允许浏览器向跨域服务器发送 XMLHttpRequest 或 Fetch 请求。CORS 跨域资源共享的原理是服务器通过 HTTP 响应头告诉浏览器可以跨域访问该服务器上的资源。
在 React 中的使用，我们可以通过设置请求头来启用 CORS，如下所示：
-- -------------------- ---- -------
----- ---------- - ------ -- -
----- --- - ------------------------------------------------------------------------
------ ---------- -
-------- -
------------------------------ ----
--
------------------ -- -
-- ------------- -
------ ----------------
-
----- --- -------------- ----------
-- -------------- -- -
------------------------------------
---
--4. 结语
以上是在 React 中处理跨域请求的一些方法，每种方法都有其优缺点，在实际开发中，我们需要根据自己的业务需求和开发环境的限制选择合适的方式。希望本文可以为大家提供一些帮助和指导。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67820fca935627c900f567a2
