项目上线中的跨域问题

本文将深入解析跨域问题的本质，并提供实用的解决方案。

引言

跨域问题可以说是前端开发者的"老朋友"了，特别是在项目从开发环境迁移到生产环境时，这个问题更是频繁出现。许多开发者对跨域的理解停留在表面，导致在项目上线时手忙脚乱。今天我们就来彻底搞懂跨域问题。

什么是跨域？

同源策略的三要素

跨域问题源于浏览器的同源策略（Same-Origin Policy），这是浏览器最核心的安全机制。同源策略要求两个 URL 必须满足以下三个条件才被认为是"同源"：

1. 协议相同：http:// 和 https:// 是不同协议
2. 域名相同：example.com 和 api.example.com 是不同域名
3. 端口相同：:80 和 :8080 是不同端口

只要其中任何一个条件不满足，就被认为是跨域请求，浏览器会阻止这种请求。

跨域判断示例

假设当前页面 URL 为 https://www.example.com:443/page

项目上线时的跨域陷阱

开发环境 vs 生产环境

这是最常见的跨域场景：

开发环境配置：

前端：http://localhost:3000
后端：http://localhost:8080

生产环境配置：

前端：https://myapp.com
后端：https://api.myapp.com

典型错误信息

当跨域问题发生时，浏览器控制台会出现类似错误：

Access to XMLHttpRequest at 'https://api.myapp.com/users' 
from origin 'https://myapp.com' has been blocked by CORS policy: 
No 'Access-Control-Allow-Origin' header is present on the requested resource.

这个错误信息告诉我们：请求被 CORS（跨域资源共享）策略阻止了。

跨域问题的解决方案

方案一：后端配置 CORS（推荐）

CORS（Cross-Origin Resource Sharing）是解决跨域问题的标准方案。通过在后端设置特定的响应头，告诉浏览器允许跨域请求。

Node.js + Express 示例：

// 基础 CORS 配置
app.use((req, res, next) => {
  // 允许的源
  res.header('Access-Control-Allow-Origin', 'https://myapp.com');
  // 允许的 HTTP 方法
  res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS');
  // 允许的请求头
  res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization, X-Requested-With');
  // 是否允许携带凭证
  res.header('Access-Control-Allow-Credentials', 'true');
  
  // 处理预检请求
  if (req.method === 'OPTIONS') {
    res.sendStatus(200);
  } else {
    next();
  }
});

使用 cors 中间件（更简洁）：

const cors = require('cors');

const corsOptions = {
  origin: ['https://myapp.com', 'https://www.myapp.com'],
  methods: ['GET', 'POST', 'PUT', 'DELETE'],
  allowedHeaders: ['Content-Type', 'Authorization'],
  credentials: true
};

app.use(cors(corsOptions));

Spring Boot 示例：

@CrossOrigin(origins = "https://myapp.com")
@RestController
public class ApiController {
    // 控制器方法
}

// 或者全局配置
@Configuration
public class CorsConfig {
    @Bean
    public CorsConfigurationSource corsConfigurationSource() {
        CorsConfiguration configuration = new CorsConfiguration();
        configuration.setAllowedOrigins(Arrays.asList("https://myapp.com"));
        configuration.setAllowedMethods(Arrays.asList("GET", "POST", "PUT", "DELETE"));
        configuration.setAllowedHeaders(Arrays.asList("*"));
        configuration.setAllowCredentials(true);
        
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", configuration);
        return source;
    }
}

方案二：反向代理

通过代理服务器将跨域请求转换为同源请求。

Nginx 配置示例：

server {
    listen 443 ssl;
    server_name myapp.com;
    
    # 前端静态资源
    location / {
        root /var/www/frontend;
        try_files $uri $uri/ /index.html;
    }
    
    # API 代理
    location /api/ {
        proxy_pass http://backend-server:8080/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

开发环境代理配置（webpack）：

// webpack.config.js
module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
};

方案三：同域部署

将前后端部署在同一域名的不同路径下：

前端：https://myapp.com/
后端：https://myapp.com/api/

这种方案从根本上避免了跨域问题，但需要合理的架构设计。

项目上线最佳实践

1. 环境配置管理

使用环境变量管理不同环境的 API 地址：

// config.js
const config = {
  development: {
    API_BASE_URL: 'http://localhost:8080'
  },
  production: {
    API_BASE_URL: 'https://api.myapp.com'
  }
};

export default config[process.env.NODE_ENV || 'development'];

// api.js
import config from './config';

const api = axios.create({
  baseURL: config.API_BASE_URL,
  timeout: 10000
});

2. 分环境测试

建立完整的测试流程：

1. 本地开发环境：localhost 互相调用
2. 测试环境：模拟生产环境的域名配置
3. 预生产环境：与生产环境完全一致的配置
4. 生产环境：最终部署环境

3. 安全配置考虑

生产环境 CORS 配置原则：

// ❌ 不安全的配置
res.header('Access-Control-Allow-Origin', '*');

// ✅ 安全的配置
const allowedOrigins = [
  'https://myapp.com',
  'https://www.myapp.com'
];

const origin = req.headers.origin;
if (allowedOrigins.includes(origin)) {
  res.header('Access-Control-Allow-Origin', origin);
}

4. 错误处理和调试

添加完善的错误处理：

// 请求拦截器
api.interceptors.response.use(
  response => response,
  error => {
    if (error.message.includes('CORS')) {
      console.error('跨域请求失败:', error);
      // 显示用户友好的错误信息
      showErrorMessage('网络连接异常，请稍后重试');
    }
    return Promise.reject(error);
  }
);

常见问题排查

问题 1：预检请求失败

现象： 复杂请求（如 POST 带 JSON 数据）在发送实际请求前会发送 OPTIONS 预检请求。

解决： 确保后端正确处理 OPTIONS 请求：

app.options('*', (req, res) => {
  res.header('Access-Control-Allow-Origin', 'https://myapp.com');
  res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS');
  res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization');
  res.sendStatus(200);
});

问题 2：携带凭证的跨域请求

现象： 需要发送 Cookie 或 Authorization 头的请求失败。

解决： 前后端都需要配置：

// 前端
axios.defaults.withCredentials = true;

// 后端
res.header('Access-Control-Allow-Credentials', 'true');
// 注意：设置 credentials 为 true 时，Origin 不能为 '*'

问题 3：开发环境正常，生产环境跨域

排查步骤：

1. 检查生产环境的实际请求 URL
2. 确认后端 CORS 配置是否包含生产域名
3. 检查 HTTPS/HTTP 协议是否一致
4. 验证域名解析是否正确

跨域问题虽然常见，但只要理解其本质原理，选择合适的解决方案，就能够有效避免上线时的困扰。关键要点包括：

1. 理解同源策略：协议、域名、端口三要素
2. 选择合适方案：CORS 配置、反向代理或同域部署
3. 环境配置管理：使用环境变量区分不同环境
4. 安全优先：生产环境避免使用通配符配置
5. 提前测试：在各个环境中充分测试跨域配置

最好的跨域解决方案不是事后补救，而是在项目架构设计阶段就考虑清楚部署策略，选择最适合项目的方案。这样既能避免上线时的紧急处理，也能确保系统的安全性和稳定性。