react 如何设置 代理
设置代理的常见方法
在React项目中设置代理通常用于解决开发环境中的跨域问题或API请求转发。以下是几种常用方法：
使用package.json配置
在项目根目录的package.json文件中添加proxy字段：
{
"proxy": "http://localhost:5000"
}这种配置会将所有未知请求转发到指定的后端服务器地址，适用于Create React App创建的项目。
自定义代理配置
对于更复杂的代理需求，可以创建setupProxy.js文件（需安装http-proxy-middleware）：
const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function(app) {
app.use(
'/api',
createProxyMiddleware({
target: 'http://localhost:5000',
changeOrigin: true,
})
);
};该文件应放在src目录下，支持多路径代理和更灵活的配置选项。
开发服务器配置
直接修改webpack开发服务器配置（适用于eject后的项目）：
// config/webpackDevServer.config.js
proxy: {
'/api': {
target: 'http://localhost:5000',
secure: false,
pathRewrite: {'^/api': ''}
}
}环境变量配置
结合环境变量实现动态代理：
// .env.development
REACT_APP_API_URL=http://localhost:5000然后在代理配置中引用该变量：
target: process.env.REACT_APP_API_URL注意事项
- Create React App项目默认支持前两种方法，无需eject
- 生产环境应直接配置服务器端代理（如Nginx）
- 路径重写（pathRewrite）可用于去除API前缀
- 修改配置后需要重启开发服务器才能生效
