react 如何设置 代理
在 React 中设置代理
在开发过程中，为了跨域请求后端 API，可以通过配置代理来解决。以下是几种常见的设置代理的方法：
使用 package.json 配置代理
在 package.json 文件中添加 proxy 字段，指定后端 API 的地址：
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"proxy": "http://localhost:5000"
}这样配置后，所有发送到 /api 的请求会自动转发到 http://localhost:5000/api。
使用 http-proxy-middleware 配置代理
对于更复杂的代理需求，可以使用 http-proxy-middleware：
-
安装
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://localhost:5000', changeOrigin: true, }) ); };
这种方式支持更灵活的代理配置，比如路径重写、多代理等。
#### 使用环境变量配置代理
在 `.env` 文件中定义代理目标：
```env
REACT_APP_API_URL=http://localhost:5000然后在代码中使用环境变量：
const apiUrl = process.env.REACT_APP_API_URL;
fetch(`${apiUrl}/api/data`);使用 vite 或 webpack 配置代理
如果使用 vite，可以在 vite.config.js 中配置代理：
export default {
server: {
proxy: {
'/api': 'http://localhost:5000',
},
},
};对于 webpack，可以在 webpack.config.js 中配置 devServer.proxy：
module.exports = {
devServer: {
proxy: {
'/api': 'http://localhost:5000',
},
},
};注意事项
- 代理仅在开发环境中生效，生产环境需要通过服务器（如 Nginx）配置反向代理。
- 确保后端 API 支持跨域请求，或者代理配置正确。
- 修改代理配置后，可能需要重启开发服务器。
通过以上方法，可以灵活地在 React 项目中设置代理，解决跨域问题。
