您现在的位置是：网站首页 > 跨域处理方案文章详情

跨域处理方案

陈川【 Node.js 】 2803人已围观 8833字

跨域问题的本质

跨域问题源于浏览器的同源策略限制。同源策略要求协议、域名和端口完全相同，否则会被视为不同源。这种限制虽然提高了安全性，但也给开发带来了挑战。常见的跨域场景包括前后端分离部署、调用第三方API、微服务架构等。

JSONP方案

JSONP是最早的跨域解决方案之一，利用<script>标签不受同源策略限制的特性。其原理是通过动态创建script标签，将回调函数名作为参数传递给服务器，服务器返回JavaScript代码调用该函数。

function handleResponse(data) {
  console.log('Received data:', data);
}

const script = document.createElement('script');
script.src = 'https://api.example.com/data?callback=handleResponse';
document.body.appendChild(script);

服务器端需要配合返回特定格式的数据：

// Node.js Express示例
app.get('/data', (req, res) => {
  const data = { key: 'value' };
  const callback = req.query.callback;
  res.send(`${callback}(${JSON.stringify(data)})`);
});

JSONP的局限性包括只支持GET请求、缺乏错误处理机制、存在XSS风险等。

CORS方案

CORS（跨域资源共享）是现代浏览器支持的标准化跨域方案。它通过在HTTP头中添加特定字段来实现跨域访问控制。

简单请求处理

对于简单请求（GET、HEAD、POST且Content-Type为text/plain、multipart/form-data、application/x-www-form-urlencoded），浏览器会自动发送CORS请求，只需服务器设置响应头：

// Node.js设置CORS头
app.use((req, res, next) => {
  res.setHeader('Access-Control-Allow-Origin', '*');
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
  next();
});

预检请求处理

对于非简单请求，浏览器会先发送OPTIONS预检请求：

// 处理预检请求
app.options('/api', (req, res) => {
  res.setHeader('Access-Control-Allow-Origin', 'https://yourdomain.com');
  res.setHeader('Access-Control-Allow-Methods', 'PUT, DELETE');
  res.setHeader('Access-Control-Allow-Headers', 'X-Custom-Header');
  res.setHeader('Access-Control-Max-Age', '86400'); // 缓存时间
  res.sendStatus(204);
});

带凭证的请求

需要传输cookie或认证信息时：

// 前端设置
fetch('https://api.example.com', {
  credentials: 'include'
});

// 服务端设置
res.setHeader('Access-Control-Allow-Origin', 'https://yourdomain.com');
res.setHeader('Access-Control-Allow-Credentials', 'true');

代理服务器方案

通过同域服务器转发请求可以绕过浏览器限制，常用方案包括：

Node.js中间件代理

使用http-proxy-middleware创建代理：

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

app.use('/api', createProxyMiddleware({
  target: 'http://target-server.com',
  changeOrigin: true,
  pathRewrite: { '^/api': '' },
  onProxyReq: (proxyReq, req) => {
    // 可以在这里修改请求头
    proxyReq.setHeader('X-Added', 'value');
  }
}));

Nginx反向代理

Nginx配置示例：

location /api/ {
  proxy_pass http://backend-server/;
  proxy_set_header Host $host;
  proxy_set_header X-Real-IP $remote_addr;
  proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}

WebSocket跨域

WebSocket协议不受同源策略限制，但服务器可以验证Origin头：

// Node.js WebSocket服务器
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', (ws, req) => {
  const origin = req.headers.origin;
  if (!allowedOrigins.includes(origin)) {
    return ws.close();
  }
  // 处理连接...
});

postMessage跨域

window.postMessage API可以实现不同窗口间的跨域通信：

// 发送方
const iframe = document.getElementById('iframe');
iframe.contentWindow.postMessage({ key: 'value' }, 'https://target-origin.com');

// 接收方
window.addEventListener('message', (event) => {
  if (event.origin !== 'https://trusted-origin.com') return;
  console.log('Received message:', event.data);
});

跨域资源共享策略

除了技术方案，还需要考虑安全策略：

精确设置Access-Control-Allow-Origin，避免使用通配符*
限制允许的HTTP方法和头信息
设置适当的缓存时间
对敏感操作实施CSRF防护
实施请求频率限制

特殊场景处理

文件上传跨域

处理文件上传时需要特殊配置：

// 前端FormData上传
const formData = new FormData();
formData.append('file', fileInput.files[0]);

fetch('https://api.example.com/upload', {
  method: 'POST',
  body: formData,
  // 注意不要手动设置Content-Type
});

// 服务端配置
res.setHeader('Access-Control-Allow-Origin', '*');
res.setHeader('Access-Control-Allow-Methods', 'POST');
res.setHeader('Access-Control-Allow-Headers', 'Content-Type');

跨域Cookie处理

// 前端设置
fetch('https://api.example.com', {
  credentials: 'include'
});

// 服务端设置
res.setHeader('Access-Control-Allow-Origin', 'https://yourdomain.com');
res.setHeader('Access-Control-Allow-Credentials', 'true');
res.cookie('session', 'value', {
  sameSite: 'None',
  secure: true
});

性能优化考虑

跨域请求可能带来性能开销，优化策略包括：

预检请求缓存（Access-Control-Max-Age）
合并多个跨域请求
使用CDN加速跨域资源
实施HTTP/2减少连接开销
压缩跨域传输的数据

错误处理与调试

完善的错误处理机制：

fetch('https://api.example.com')
  .then(response => {
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    return response.json();
  })
  .catch(error => {
    console.error('Fetch error:', error);
    // 区分CORS错误和其他错误
    if (error.message.includes('Failed to fetch')) {
      showCorsError();
    }
  });

Chrome开发者工具中可以通过Network标签查看CORS相关头信息，Console会显示具体的跨域错误信息。

安全最佳实践

严格验证Origin头
实施CSRF令牌机制
限制允许的HTTP方法
对敏感接口实施额外认证
记录和监控跨域请求
定期审计CORS策略

现代浏览器API

新的浏览器API提供了更多跨域控制能力：

Fetch Metadata

// 服务端检查Sec-Fetch-*头
app.use((req, res, next) => {
  const secFetchSite = req.headers['sec-fetch-site'];
  if (secFetchSite === 'cross-site') {
    // 加强验证
  }
  next();
});

COEP/CORP/COOP

内容安全策略增强：

// 设置跨域隔离
res.setHeader('Cross-Origin-Embedder-Policy', 'require-corp');
res.setHeader('Cross-Origin-Opener-Policy', 'same-origin');
res.setHeader('Cross-Origin-Resource-Policy', 'same-site');

Node.js特定实现

Express中间件

使用cors包简化配置：

const cors = require('cors');

// 基本配置
app.use(cors());

// 高级配置
app.use(cors({
  origin: ['https://site1.com', 'https://site2.com'],
  methods: ['GET', 'POST'],
  allowedHeaders: ['Content-Type', 'Authorization'],
  exposedHeaders: ['X-Custom-Header'],
  credentials: true,
  maxAge: 86400
}));

// 动态origin
app.use(cors({
  origin: (origin, callback) => {
    if (whitelist.includes(origin)) {
      callback(null, true);
    } else {
      callback(new Error('Not allowed by CORS'));
    }
  }
}));

Koa实现

const Koa = require('koa');
const cors = require('@koa/cors');

const app = new Koa();
app.use(cors({
  origin: ctx => {
    const validDomains = ['https://safe.com', 'https://trusted.com'];
    if (validDomains.includes(ctx.request.header.origin)) {
      return ctx.request.header.origin;
    }
    return false;
  }
}));

微服务架构中的跨域

在微服务架构中，跨域问题更加复杂：

API网关统一处理跨域
服务网格中的跨域策略
JWT令牌传递
服务间通信的CORS配置

// API网关配置示例
const gateway = require('express-gateway');
gateway()
  .load(path.join(__dirname, 'config'))
  .run();

对应的配置文件：

http:
  port: 8080
apiEndpoints:
  api:
    host: localhost
    paths: '/api/*'
serviceEndpoints:
  backend:
    url: 'http://backend-service'
policies:
  - cors
  - proxy
pipelines:
  default:
    apiEndpoints:
      - api
    policies:
      - cors:
          - action:
              origin: '*'
              methods: ['GET', 'POST']
              allowedHeaders: ['Content-Type']
      - proxy:
          - action:
              serviceEndpoint: backend
              changeOrigin: true

测试与验证

完善的测试策略：

单元测试CORS中间件
集成测试跨域接口
自动化测试不同origin场景
安全测试CSRF防护

// 测试用例示例
const request = require('supertest');
const app = require('../app');

describe('CORS Middleware', () => {
  it('should allow requests from whitelisted origins', async () => {
    const res = await request(app)
      .get('/api/data')
      .set('Origin', 'https://allowed.com');
    expect(res.headers['access-control-allow-origin']).toBe('https://allowed.com');
  });

  it('should reject requests from non-whitelisted origins', async () => {
    const res = await request(app)
      .get('/api/data')
      .set('Origin', 'https://hacker.com');
    expect(res.headers['access-control-allow-origin']).toBeUndefined();
  });
});

性能监控与分析

监控跨域请求的性能指标：

预检请求比例
跨域请求延迟
失败率监控
流量分析

// 监控中间件示例
app.use((req, res, next) => {
  const start = Date.now();
  const origin = req.headers.origin;

  res.on('finish', () => {
    const duration = Date.now() - start;
    metrics.track('cors_request', {
      origin,
      method: req.method,
      status: res.statusCode,
      duration
    });
  });

  next();
});

移动端特殊考虑

移动端跨域的特殊场景：

混合应用（WebView）中的跨域
移动浏览器差异
离线场景处理
应用链接（App Links）集成

// 处理Android WebView的跨域
if (navigator.userAgent.includes('Android')) {
  // 特殊处理
  bridge.setCorsPolicy({
    allowedOrigins: ['https://mobile-api.example.com']
  });
}

第三方服务集成

集成第三方API时的跨域处理：

代理第三方API
处理CORS预检缓存
错误重试机制
认证信息转发

// 代理第三方API示例
app.use('/external-api', createProxyMiddleware({
  target: 'https://third-party-api.com',
  changeOrigin: true,
  onProxyRes: (proxyRes) => {
    // 修改响应头
    proxyRes.headers['access-control-allow-origin'] = '*';
    delete proxyRes.headers['x-frame-options'];
  },
  pathRewrite: {
    '^/external-api': '/v1'
  }
}));

上一篇： RESTful API设计

下一篇：负载均衡策略