前端react如何配置反向代理
在React中配置反向代理
使用create-react-app创建的项目可以通过http-proxy-middleware配置反向代理，解决开发环境跨域问题。
方法一：通过setupProxy.js配置
在src目录下创建setupProxy.js文件：
const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function(app) {
app.use(
'/api',
createProxyMiddleware({
target: 'http://your-backend-server.com',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
})
);
};方法二：修改package.json
在package.json中添加proxy字段：
"proxy": "http://your-backend-server.com"配置多代理
对于多个API端点的情况，setupProxy.js可以配置多个代理规则：
const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function(app) {
app.use(
'/api1',
createProxyMiddleware({
target: 'http://server1.com',
changeOrigin: true
})
);
app.use(
'/api2',
createProxyMiddleware({
target: 'http://server2.com',
changeOrigin: true
})
);
};生产环境配置
生产环境需要通过web服务器(Nginx/Apache)配置反向代理。Nginx示例配置：
location /api {
proxy_pass http://your-backend-server.com;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
}注意事项
- 开发环境配置只对
npm start有效 - 修改代理配置后需要重启开发服务器
- 路径重写规则根据实际API结构调整
- 生产环境必须通过服务器配置，不能依赖前端代理
