跨域请求是指在 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 这个中间件来实现代理服务器的功能。首先安装中间件：
npm install http-proxy-middleware --save
然后在 src/setupProxy.js 文件中配置代理服务器：
const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function(app) {
app.use(
'/api',
createProxyMiddleware({
target: 'http://api.example.com',
changeOrigin: true,
})
);
};上述代码表示，使用代理服务器请求 /api 下的资源时，将请求转发到 http://api.example.com 上。changeOrigin 选项是必需的，它会将源头改回请求的地址（即 http://localhost:3000），否则请求的源头会被替换成代理服务器的地址，导致跨域请求失败。
2. 使用 JSONP
JSONP 是一种基于 script 标签的跨域请求方式，和 Ajax 不同，JSONP 的返回结果需要在回调函数中处理。因为 script 标签无法获取返回数据，所以需要将返回结果包裹在一个函数中，前端通过回调函数获取数据。
在 React 中，可以将 JSONP 封装成一个组件，方便调用：
import React, { useState, useEffect } from 'react';
function Jsonp({ url, callbackName, children }) {
const [data, setData] = useState();
useEffect(() => {
const script = document.createElement('script');
script.src = `${url}${url.indexOf('?') !== -1 ? '&' : '?'}callback=${callbackName}`;
document.head.appendChild(script);
return () => {
document.head.removeChild(script);
};
}, [callbackName, url]);
window[callbackName] = (data) => {
setData(data);
};
return <>{children(data)}</>;
}
export default Jsonp;上述组件通过动态创建 script 标签的方式加载跨域脚本资源，并使用回调函数获取数据。在使用这个组件时，可以像下面这样调用：
import Jsonp from './Jsonp';
function App() {
return (
<div>
<Jsonp url="http://api.example.com?jsonp=?&data=xyz" callbackName="jsonp">
{(data) => {
return (
<ul>
{data.map((item) => (
<li key={item.id}>{item.name}</li>
))}
</ul>
);
}}
</Jsonp>
</div>
);
}
export default App;上述代码通过传入跨域接口的 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 模块：
npm install cors --save
然后在后端代码（如 Node.js）中启用 CORS：
const express = require('express');
const cors = require('cors');
const app = express();
app.use(cors());上述代码表示，在所有请求中启用 CORS，允许跨源访问资源。
总结
处理跨域请求是 Web 开发中一项常见的任务，本文介绍了三种处理跨域请求的方式：使用代理服务器、使用 JSONP 和使用 CORS。在 React 项目中，可以根据实际需求来选择合适的方式。要注意的是，CORS 是跨域请求的标准解决方案，最好在开发中优先考虑使用它。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65a20793add4f0e0ffa1a170