react如何设置代理
在 React 项目中设置代理可以通过以下方法实现，主要用于解决开发环境下的跨域问题或 API 请求转发：
方法一：通过 package.json 配置代理
在项目根目录的 package.json 中添加 proxy 字段，指定目标服务器地址：
{
"proxy": "http://your-api-server.com"
}- 仅适用于开发环境（
npm start）。 - 所有未匹配静态资源的请求会自动转发到目标地址。
- 不支持多代理或路径重写。
方法二：使用 http-proxy-middleware 配置高级代理
安装中间件：
npm install http-proxy-middleware --save-dev在 src 目录下创建 setupProxy.js 文件（无需手动引入，React 会自动加载）：
const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function(app) {
app.use(
'/api',
createProxyMiddleware({
target: 'http://your-api-server.com',
changeOrigin: true,
pathRewrite: { '^/api': '' },
})
);
};- 支持多代理配置，通过路径匹配（如
/api）。 changeOrigin修改请求头中的Host为目标地址。pathRewrite可重写请求路径（如移除/api前缀）。
方法三：通过环境变量配置开发服务器
在 .env.development 文件中定义代理目标：
REACT_APP_API_URL=http://your-api-server.com然后在 setupProxy.js 中动态读取：
const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function(app) {
app.use(
'/api',
createProxyMiddleware({
target: process.env.REACT_APP_API_URL,
changeOrigin: true,
})
);
};注意事项
- 生产环境需通过后端服务（如 Nginx）处理代理，前端代码无法直接配置。
- 修改代理配置后需重启开发服务器（
npm start）。 - 使用
http-proxy-middleware时确保版本与 React 兼容（CRA 5+ 需使用 v2+）。
通过上述方法，可灵活应对本地开发中的跨域或 API 转发需求。
