React?腳手架配置代理完整指南(最新推薦)

更新時間：2024年12月31日 14:17:51 作者：傻小胖

本文詳細介紹了React腳手架配置代理的多種方式,文章還討論了常見問題的解決方案,如跨域問題、WebSocket代理和錯誤處理,并提供了生產(chǎn)環(huán)境配置建議和調(diào)試技巧,感興趣的朋友一起看看吧

React 腳手架配置代理完整指南

1. 代理配置方式概述

React 腳手架中配置代理主要有以下幾種方式：

在 package.json 中配置簡單代理
在 src/setupProxy.js 中配置復(fù)雜代理
使用 nginx 反向代理
使用環(huán)境變量配置代理

2. 基礎(chǔ)配置方法

2.1 package.json 簡單配置

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "proxy": "http://localhost:5000"
}

這種方式的特點：

優(yōu)點：配置簡單
缺點：只能配置單個代理
適用場景：只需要代理到單個接口服務(wù)器

2.2 setupProxy.js 配置

// src/setupProxy.js
const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function(app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'http://localhost:5000',
      changeOrigin: true,
      pathRewrite: {
        '^/api': ''
      }
    })
  );
  app.use(
    '/api2',
    createProxyMiddleware({
      target: 'http://localhost:5001',
      changeOrigin: true,
      pathRewrite: {
        '^/api2': ''
      }
    })
  );
};

這種方式的特點：

優(yōu)點：可以配置多個代理，更靈活
缺點：配置相對復(fù)雜
適用場景：需要代理到多個服務(wù)器

3. 高級配置示例

3.1 帶身份驗證的代理

// src/setupProxy.js
const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function(app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'http://localhost:5000',
      changeOrigin: true,
      onProxyReq: function(proxyReq, req, res) {
        // 添加自定義請求頭
        proxyReq.setHeader('Authorization', 'Bearer your-token');
      },
      onProxyRes: function(proxyRes, req, res) {
        // 處理響應(yīng)頭
        proxyRes.headers['x-proxy-by'] = 'your-app';
      }
    })
  );
};

3.2 帶路徑重寫的代理

// src/setupProxy.js
const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function(app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'http://localhost:5000',
      changeOrigin: true,
      pathRewrite: {
        '^/api/old-path': '/api/new-path', // 重寫路徑
        '^/api/remove': '' // 刪除路徑
      },
      router: {
        // 根據(jù)請求路徑改變目標服務(wù)器
        'dev.localhost:3000': 'http://localhost:8000',
        'staging.localhost:3000': 'http://localhost:9000'
      }
    })
  );
};

3.3 帶負載均衡的代理

// src/setupProxy.js
const { createProxyMiddleware } = require('http-proxy-middleware');
// 定義目標服務(wù)器列表
const targets = [
  'http://localhost:5000',
  'http://localhost:5001',
  'http://localhost:5002'
];
let currentIndex = 0;
module.exports = function(app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: targets[0],
      changeOrigin: true,
      router: () => {
        // 簡單的輪詢負載均衡
        currentIndex = (currentIndex + 1) % targets.length;
        return targets[currentIndex];
      }
    })
  );
};

4. 環(huán)境變量配置

4.1 創(chuàng)建環(huán)境變量文件

# .env.development
REACT_APP_API_URL=http://localhost:5000
# .env.production
REACT_APP_API_URL=https://api.production.com

4.2 使用環(huán)境變量配置代理

// src/setupProxy.js
const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function(app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: process.env.REACT_APP_API_URL,
      changeOrigin: true
    })
  );
};

5. 常見問題和解決方案

5.1 跨域問題

// src/setupProxy.js
module.exports = function(app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'http://localhost:5000',
      changeOrigin: true,
      onProxyRes: function(proxyRes, req, res) {
        // 處理跨域響應(yīng)頭
        proxyRes.headers['Access-Control-Allow-Origin'] = '*';
        proxyRes.headers['Access-Control-Allow-Methods'] = 'GET,PUT,POST,DELETE,OPTIONS';
        proxyRes.headers['Access-Control-Allow-Headers'] = 'Content-Type,Authorization';
      }
    })
  );
};

5.2 WebSocket 代理

// src/setupProxy.js
module.exports = function(app) {
  app.use(
    '/socket',
    createProxyMiddleware({
      target: 'ws://localhost:5000',
      ws: true, // 啟用 websocket 代理
      changeOrigin: true
    })
  );
};

5.3 錯誤處理

// src/setupProxy.js
module.exports = function(app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'http://localhost:5000',
      changeOrigin: true,
      onError: function(err, req, res) {
        res.writeHead(500, {
          'Content-Type': 'text/plain'
        });
        res.end('Proxy Error: ' + err);
      }
    })
  );
};

6. 生產(chǎn)環(huán)境配置

6.1 使用 nginx 配置

# nginx.conf
server {
    listen 80;
    server_name your-domain.com;
    location /api {
        proxy_pass http://backend-server;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
    location / {
        root /usr/share/nginx/html;
        index index.html;
        try_files $uri $uri/ /index.html;
    }
}