react如何设置代理
设置代理的几种方法
在React项目中设置代理主要用于解决开发环境下的跨域问题，以下是常见的配置方式：
通过package.json配置
在项目根目录的package.json文件中添加proxy字段：
{
"proxy": "http://localhost:5000"
}这种配置会将所有未知请求转发到指定地址，适用于简单场景。
使用http-proxy-middleware
创建src/setupProxy.js文件（Create React App项目）：
const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function(app) {
app.use(
'/api',
createProxyMiddleware({
target: 'http://localhost:5000',
changeOrigin: true,
})
);
};这种方式支持更灵活的路径匹配和配置选项。
webpack-dev-server配置 修改webpack配置（非CRA项目）：
devServer: {
proxy: {
'/api': {
target: 'http://localhost:5000',
pathRewrite: { '^/api': '' },
secure: false
}
}
}环境变量配置 结合环境变量动态设置代理目标：
const target = process.env.REACT_APP_API_URL || 'http://localhost:5000';注意事项
- 代理配置仅影响开发服务器（npm start）
- 生产环境需要通过Nginx等服务器配置反向代理
- 复杂路径匹配建议使用http-proxy-middleware
- 修改配置后需要重启开发服务器
