上海十大黑心装修公司_凡科小程序免费制作平台_seo学习论坛_网页设计软件有哪些

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

1. 代理配置方式概述

React 脚手架中配置代理主要有以下几种方式：

1. 在 package.json 中配置简单代理
2. 在 src/setupProxy.js 中配置复杂代理
3. 使用 nginx 反向代理
4. 使用环境变量配置代理

2. 基础配置方法

2.1 package.json 简单配置

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

这种方式的特点：

• 优点：配置简单
• 缺点：只能配置单个代理
• 适用场景：只需要代理到单个接口服务器

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': ''}}));
};

这种方式的特点：

• 优点：可以配置多个代理，更灵活
• 缺点：配置相对复杂
• 适用场景：需要代理到多个服务器

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) {// 处理响应头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: {// 根据请求路径改变目标服务器'dev.localhost:3000': 'http://localhost:8000','staging.localhost:3000': 'http://localhost:9000'}}));
};

3.3 带负载均衡的代理

// src/setupProxy.js
const { createProxyMiddleware } = require('http-proxy-middleware');// 定义目标服务器列表
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. 环境变量配置

4.1 创建环境变量文件

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

4.2 使用环境变量配置代理

// 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) {// 处理跨域响应头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. 生产环境配置

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;}
}

7. 最佳实践

1. 开发环境建议：

   • 使用 setupProxy.js 进行配置
   • 避免在生产环境使用代理
   • 使用环境变量管理配置

2. 生产环境建议：

   • 使用 nginx 等专业代理服务器
   • 配置适当的缓存策略
   • 注意安全性配置

3. 调试技巧：

   • 使用 console.log 调试代理配置
   • 检查网络请求面板
   • 验证请求头和响应头

4. 性能优化：

   • 合理使用缓存
   • 避免不必要的代理
   • 考虑使用负载均衡