前端处理跨域问题的全面指南

发布时间：2025-07-04 热度：

什么是跨域问题

跨域问题（Cross-Origin Resource Sharing, CORS）是浏览器出于安全考虑实施的一种同源策略限制。当网页尝试从一个与当前页面不同源（协议、域名或端口任一不同）的服务器请求资源时，浏览器会阻止这种请求，除非服务器明确允许。

同源策略要求以下三个必须相同：

协议（http/https）
域名（example.com）
端口（80/443等）

常见的跨域场景

前端应用（http://localhost:3000）访问后端API（http://localhost:8080）
主站（https://www.example.com）访问子域API（https://api.example.com）
使用第三方API服务（如支付、地图等）

前端解决跨域的方案

1. 代理服务器

开发环境中，可以通过配置代理服务器来解决跨域问题：

// vue.config.js (Vue项目)module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }}// webpack.config.js (React项目)module.exports = {
  // ...
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        secure: false,
        changeOrigin: true
      }
    }
  }}

2. JSONP（仅限GET请求）

JSONP利用<script>标签不受同源策略限制的特性：

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

3. CORS（跨源资源共享）

虽然CORS主要由后端配置，但前端需要了解：

fetch('https://api.example.com/data', {
  method: 'GET',
  mode: 'cors', // 这是默认值，可以省略
  headers: {
    'Content-Type': 'application/json'
  },
  credentials: 'include' // 如果需要发送cookies}).then(response => response.json()).then(data => console.log(data)).catch(error => console.error('Error:', error));

4. WebSocket

WebSocket协议不受同源策略限制：

const socket = new WebSocket('wss://api.example.com/ws');socket.onopen = function(e) {
  console.log('Connection established');
  socket.send(JSON.stringify({message: 'Hello'}));};socket.onmessage = function(event) {
  console.log('Data received:', event.data);};

5. postMessage

用于不同窗口/iframe间通信：

// 发送方const targetWindow = document.getElementById('iframe').contentWindow;targetWindow.postMessage('Hello there!', 'https://target.example.com');// 接收方window.addEventListener('message', (event) => {
  if (event.origin !== 'https://trusted.source.com') return;
  console.log('Received message:', event.data);});

生产环境解决方案

Nginx反向代理：

server {
  listen 80;
  server_name yourdomain.com;
  
  location /api/ {
    proxy_pass http://api-server:8080/;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
  }}

CDN设置CORS：在CDN服务商处配置CORS头
API网关：通过API网关统一处理跨域请求

常见错误及解决

预检请求失败：复杂请求会先发送OPTIONS请求，确保后端正确处理
缺少CORS头：后端需设置Access-Control-Allow-Origin等头
凭证问题：带cookie的请求需要设置credentials: 'include'和Access-Control-Allow-Credentials: true