跨域问题是前端开发中常见的一个问题，特别是在使用 React 框架时。由于 React 前端项目通常与后端 API 不在同一个域名下，会出现跨域问题，导致无法正常访问 API 数据。本文将介绍如何解决 React 项目中的跨域问题。
什么是跨域问题
跨域问题（CORS）是指在浏览器端，当一个脚本文件试图访问与该脚本文件不在同一个域的资源时，浏览器会发出“跨源请求”，这样的请求通常不被允许。原因在于浏览器出于安全考虑，防止恶意的 XSS 和 CSRF 攻击。
解决跨域问题的方法
以下是解决 React 项目中跨域问题的两种方法：
1. 服务器端解决
使用代理服务器
在服务器端设置一个代理服务器，代理服务器可以访问前端与后端，从而在代理服务器中进行 API 调用，然后再将 API 数据返回给前端。这样，前端代码就没有了跨域问题。
例如，假设 React 项目运行于 http://localhost:3000/，而 API 服务器运行于 http://localhost:8000/，则可以在 React 项目的配置文件 package.json 中添加以下代码：
"proxy": "http://localhost:8000/"
这样，每次访问 API 服务器时，都会通过代理服务器进行。当然，在实际使用时，代理服务器可以根据具体的规则来配置。
设置 CORS 头
在 API 服务器端设置 CORS 头，这样浏览器会知道 API 服务器允许跨域访问。可以使用中间件来实现跨域，例如 cors 中间件。使用 cors 中间件的代码如下：
-- -------------------- ---- ------- ----- ------- - ------------------- ----- ---- - ---------------- ----- --- - ---------- -- ---------- ---------------- -- ---------- -------------- ------- ----------------------- ----
2. 前端解决
由于前端是在浏览器中运行，所以也可以在前端代码中解决跨域问题。其中，常见的有 JSONP 和 CORS。
JSONP
JSONP 是通过动态创建 script 标签的方式，来跨域请求数据的一种方法。JSONP 能够解决跨域问题是因为浏览器对 script 标签的跨域不会进行限制。因此，我们可以通过动态创建 script 标签的方式，来向 API 服务器请求数据。
例如，假设 API 服务器返回的数据结构如下：
{
"name": "John",
"age": 30,
"city": "New York"
}通过 JSONP 的方式来请求数据的代码如下：
function handleResponse(data) {
console.log(data.name);
}
const script = document.createElement('script');
script.src = 'http://localhost:8000/api?callback=handleResponse';
document.body.appendChild(script);在本例中，我们向 URL 为 http://localhost:8000/api 的地址发送了一个 JSONP 请求，并定义了回调函数 handleResponse。服务器端返回的数据会自动作为参数传递给回调函数，从而调用 handleResponse 函数，并将数据传递给它。在 handleResponse 函数中，我们可以使用返回的数据。
需要注意的是，JSONP 的缺点是它只能进行 GET 请求，并且容易受到 XSS 攻击。
CORS
CORS 是现代浏览器对跨域请求的一种支持。CORS 通过在 HTTP Header 中传递一些参数来告诉浏览器服务器是否允许跨域请求。
例如，假设服务器端返回的数据结构仍然为以下格式：
{
"name": "John",
"age": 30,
"city": "New York"
}则可以通过以下代码来进行跨域请求：
fetch('http://localhost:8000/api')
.then(response => response.json())
.then(data => console.log(data.name))
.catch(error => console.error(error));在本例中，我们使用了 fetch 函数来进行跨域请求，并使用 then 函数处理返回的数据。
需要注意的是，在使用 CORS 的时候，需要在服务器端进行特殊的配置。通常，服务器端需要在 HTTP Header 中添加以下的配置信息：
Access-Control-Allow-Origin: * Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS Access-Control-Allow-Headers: content-type Access-Control-Allow-Credentials: true
通过这些配置信息，浏览器就知道了服务器是否允许跨域请求。这些配置信息可以在服务器端设置，具体的设置方法可以参考相关文档。
总结
本文介绍了如何解决 React 项目中的跨域问题。由于跨域问题在前端开发中是一个常见的问题，因此对于企业级项目而言，我们需要对跨域问题有系统和深入的了解，以便能够从各个角度进行解决。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64710900968c7c53b0f0579b