当我们在使用 React 搭建 Web 应用时，可能会遇到跨域问题。跨域指的是在浏览器上发送 HTTP 请求时，请求的目标与当前页面的域名不同，如在本地开发时使用 localhost，而请求的目标是一个远程服务器。在这种情况下，由于浏览器的同源策略，我们无法直接发送 HTTP 请求，因此需要通过一些方式来处理跨域问题。
如何处理跨域问题
下面介绍几种处理跨域问题的方法：
1. JSONP
JSONP 是一种常用的跨域处理方式。JSONP 的原理是利用 script 标签没有跨域限制的特点，通过动态生成 script 标签来请求跨域数据，并在回调函数中传递数据。这种方式需要后端提供支持，返回一个 JavaScript 函数调用，前端再利用回调函数处理返回的数据。
例如，服务端代码：
app.get('/jsonp', (req, res) => {
const data = {
message: 'Hello, World!'
};
const callback = req.query.callback; // 获取回调函数名
res.end(`${callback}(${JSON.stringify(data)})`); // 返回调用语句
});前端代码：
-- -------------------- ---- ------- -------- ---------- --------- - ----- ------ - --------------------------------- ---------- - --- - ------------ - --------- ---------------------------------- - ------------------------------------ ----------- -------- ------------- - -------------------------- -
2. CORS
CORS（跨域资源共享）是另一种常用的跨域方式。CORS 的原理是在服务端设置 Access-Control-Allow-Origin 头部，指定允许跨域请求的域名。
例如，服务端代码：
-- -------------------- ---- -------
------------- ---- ----- -- -
-------------------------------------------- -----
-------
---
---------------- ----- ---- -- -
----- ---- - -
-------- ------- -------
--
---------------
---前端代码：
fetch('http://localhost:8080/cors')
.then(response => response.json())
.then(data => console.log(data.message))
.catch(error => console.error(error));3. 代理
代理是一种利用服务器转发请求的方式来解决跨域问题。我们可以在前端发起一个 HTTP 请求到本地的服务器，再由本地的服务器将请求转发到目标服务器。由于转发请求的服务器与目标服务器在同一域名下，因此不存在跨域问题。这种方式需要在本地开发时使用，在生产环境下应该由后端服务器负责代理。
例如，本地服务器代码：
-- -------------------- ---- ------- ----- ------- - ------------------- ----- ----- - --------------------------------- ----- --- - ---------- ----------------- ------- ------- ------------------------ ------------- ---- ---- ---------------- -- -- - ------------------- ------- -- ---- ------- ---
前端代码：
fetch('http://localhost:3000/proxy/cors')
.then(response => response.json())
.then(data => console.log(data.message))
.catch(error => console.error(error));总结
以上是 React 中处理跨域问题的三种方式。JSONP 是一种传统的跨域处理方法，但存在安全问题，而且只支持 GET 请求。CORS 是最常用的跨域方式，但需要服务端提供支持，并且需要注意安全问题。代理方式是一种灵活的跨域处理方法，但需要在本地开发时使用。最终选择哪种方式由具体情况决定，需要根据实际业务需求和安全要求来选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c2382c83d39b4881643248