前端代理：解决跨域问题的关键

前端代理是Web开发中的关键技术，主要用于解决开发阶段的跨域问题，提升开发效率。

什么是前端代理？

前端代理是一种在开发环境中运行的中间服务器，它位于前端应用和后端API服务器之间，负责转发HTTP请求。当浏览器发送请求时，代理服务器会拦截这些请求，将其转发到目标服务器，然后将响应返回给浏览器，从而绕过浏览器的同源策略限制。

前端代理的核心作用

1. ‌解决跨域问题‌：在开发环境中，前端应用通常运行在localhost:3000，而后端API可能运行在localhost:8080，浏览器会阻止这种跨域请求。

2. ‌路径重写‌：可以将前端请求的路径映射到后端不同的路径结构。

3. ‌请求/响应拦截‌：可以在代理层添加认证头、修改请求参数、处理响应数据。

4. ‌开发环境模拟‌：可以模拟生产环境的API响应，便于前端开发。

是否有必要使用前端代理？

‌绝对有必要‌，特别是在以下场景：

• 前后端分离架构开发
• 多环境API对接（开发、测试、生产）
• 需要处理CORS问题的本地开发
• 微服务架构中的API网关模拟

前端代理配置详解

前端代理是解决开发环境跨域问题的关键技术，下面详细介绍几种常见的配置方案：

1.Vue代理配置

// project_name=Vue代理配置
// filename=vue.config.env.js
// title=Vue环境相关代理配置
// entrypoint=false
// runnable=false
// project_final_file=false
module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: isProduction 
          ? 'https://api.production.com' 
          : 'http://localhost:8080',
        changeOrigin: true,
        secure: false,
        headers: {
          'X-Proxy-By': 'Vue-Dev-Server'
        },
        onProxyReq: (proxyReq, req, res) => {
          console.log(`[Vue Proxy] ${req.method} ${req.path}`);
        }
      }
    }
  }
}

多环境配置文件：

// project_name=Vue代理配置
// filename=.env.development
// title=Vue开发环境配置
// entrypoint=false
// runnable=false
// project_final_file=false
VUE_APP_API_BASE_URL=http://localhost:8080
VUE_APP_AUTH_URL=http://localhost:8081
VUE_APP_WS_URL=ws://localhost:8082

Vue代理配置特点：1.零代码配置，开箱即用；2.支持WebSocket代理；3.路径重写灵活；4.开发环境专用。

2.React代理配置

配置方案一：package.json简单代理

适用场景：Create React App创建的项目，简单代理需求

// project_name=React代理配置
// filename=package.json
// title=React项目包配置
// entrypoint=false
// runnable=false
// project_final_file=false
{
  "name": "react-app",
  "version": "1.0.0",
  "private": true,
  "dependencies": {
    "react": "^18.2.0",
    "react-scripts": "5.0.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build"
  },
  "proxy": "http://localhost:8080"
}

配置方案二：setupProxy.js高级配置

// project_name=React代理配置
// filename=src/setupProxy.js
// title=React代理中间件配置
// entrypoint=false
// runnable=false
// project_final_file=false
const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'http://localhost:8080',
      changeOrigin: true,
      pathRewrite: {
        '^/api': ''
      },
      onError: (err, req, res) => {
        console.error('React代理错误:', err);
      }
    })
  );
  
  app.use(
    '/uploads',
    createProxyMiddleware({
      target: 'http://localhost:8081',
      changeOrigin: true
    })
  );
};

配置方案三：craco配置代理

// project_name=React代理配置
// filename=craco.config.js
// title=React CRACO配置
// entrypoint=false
// runnable=false
// project_final_file=false
module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
        secure: false
      }
    }
  }
};

React代理配置特点：1.支持多种配置方式；2.需要手动安装中间件；3.配置相对灵活；4.支持自定义中间件。

3.通用独立代理服务器

Node.js独立代理服务器

// project_name=独立代理服务器
// filename=proxy-server.js
// title=通用代理服务器
// entrypoint=true
// runnable=true
// project_final_file=false
const express = require('express');
const { createProxyMiddleware } = require('http-proxy-middleware');
const cors = require('cors');

const app = express();
const PORT = 3001;

// 中间件
app.use(cors());
app.use(express.json());

// 静态文件服务
app.use(express.static('dist'));

// API代理配置
const apiProxyOptions = {
  target: process.env.API_URL || 'http://localhost:8080',
  changeOrigin: true,
  pathRewrite: {
    '^/api': '/api/v1'
  },
  onProxyReq: (proxyReq, req, res) => {
    console.log(`[独立代理] ${req.method} ${req.path}`);
  },
  onError: (err, req, res) => {
    console.error('[代理错误]', err);
    res.status(502).json({ error: '代理服务不可用' });
  }
};

// 应用代理
app.use('/api', createProxyMiddleware(apiProxyOptions));

// 健康检查
app.get('/health', (req, res) => {
  res.json({ 
    status: 'healthy',
    service: '独立代理服务器',
    timestamp: new Date().toISOString()
  });
});

app.listen(PORT, () => {
  console.log(`🚀 独立代理服务器运行在 http://localhost:${PORT}`);
});

代理服务器依赖配置

// project_name=独立代理服务器
// filename=package.json
// title=代理服务器依赖配置
// entrypoint=false
// runnable=false
// project_final_file=true
{
  "name": "proxy-server",
  "version": "1.0.0",
  "description": "通用前端代理服务器",
  "main": "proxy-server.js",
  "scripts": {
    "start": "node proxy-server.js",
    "dev": "nodemon proxy-server.js"
  },
  "dependencies": {
    "express": "^4.18.0",
    "http-proxy-middleware": "^2.0.0",
  }
}

独立代理服务器特点：1.跨框架通用；2.配置完全可控；3.支持高级功能；4.适合复杂场景。

配置方案总结

| 方案类型 | 适用框架 | 配置复杂度 | 灵活性 | 推荐场景 |
|---------|---------|-----------|--------|----------|
| Vue CLI代理 | Vue | 简单 | 中等 | 标准Vue项目 |
| React package.json代理 | React | 简单 | 低 | 简单代理需求 |
| React setupProxy.js | React | 中等 | 高 | 需要自定义逻辑 |
| 独立代理服务器 | 任意框架 | 复杂 | 极高 | 复杂代理需求 |

每种方案都有其适用场景，可根据项目具体需求选择合适的代理配置方式。