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：

1. 安装 http-proxy-middleware：

   npm install http-proxy-middleware --save

2. 在 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 项目中设置代理，解决跨域问题。