react如何设置代理

在 React 中设置代理

在 React 项目中设置代理通常是为了解决开发环境中的跨域问题，或者将 API 请求转发到后端服务器。以下是几种常见的方法：

使用 package.json 配置代理

在 React 项目的 package.json 文件中添加 proxy 字段，指定后端服务器的地址：

{
  "name": "react-app",
  "version": "0.1.0",
  "private": true,
  "proxy": "http://localhost:5000",
  "dependencies": {
    // 其他依赖
  }
}

这种方法适用于简单的代理需求，所有非静态资源的请求都会被转发到指定的代理服务器。

使用 http-proxy-middleware 配置代理

对于更复杂的代理需求，可以使用 http-proxy-middleware 进行配置：

在 src 目录下创建 setupProxy.js 文件：

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'http://localhost:5000',
      changeOrigin: true,
    })
  );
};

这种方法允许更灵活的配置，比如指定特定的路径前缀（如 /api）进行代理。

在 vite.config.js 中配置代理

如果使用的是 Vite 构建工具，可以在 vite.config.js 中配置代理：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:5000',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ''),
      },
    },
  },
});

在 webpack.config.js 中配置代理

如果使用的是 Webpack，可以在 webpack.config.js 中配置代理：

module.exports = {
  // 其他配置
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:5000',
        changeOrigin: true,
        pathRewrite: { '^/api': '' },
      },
    },
  },
};

使用环境变量配置代理

为了区分开发和生产环境，可以使用环境变量来动态配置代理：

在 .env.development 文件中：

REACT_APP_API_URL=http://localhost:5000

然后在代码中通过 process.env.REACT_APP_API_URL 获取代理地址。

注意事项

• 代理配置仅在开发环境中生效，生产环境需要确保 API 地址正确。
• 如果后端服务器需要 HTTPS，确保代理配置中也使用 HTTPS。
• 代理配置修改后需要重启开发服务器才能生效。

以上方法可以根据项目需求选择适合的方式配置代理。