当前位置：首页 > article >正文

前端解决跨域的几种方案

article 2025/3/27 0:46:18

以下是前端解决跨域问题的 7 种主流方案，根据应用场景和实现难度排序，附详细实现示例：

一、开发环境解决方案

1. Webpack DevServer 代理（推荐）

// vue.config.js / webpack.config.js
module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://backend-domain.com', // 后端地址
        changeOrigin: true,                 // 修改请求头Host
        pathRewrite: { '^/api': '' }         // 路径重写
      }
    }
  }
}

原理：前端请求 /api/users → DevServer 转发到 http://backend-domain.com/users

2. 浏览器禁用安全策略（临时调试）

# macOS
open -n -a "Google Chrome" --args --disable-web-security --user-data-dir=/tmp/chrome

# Windows 快捷方式属性追加
chrome.exe --disable-web-security --user-data-dir="C:/temp"

注意：仅限本地开发，需关闭所有 Chrome 实例后执行

二、生产环境解决方案

3. Nginx 反向代理

server {
    listen 80;
    server_name your-domain.com;

    location /api {
        proxy_pass http://backend-ip:8080;  # 后端服务地址
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }

    location / {
        root /usr/share/nginx/html;  # 前端静态资源
        try_files $uri $uri/ /index.html;
    }
}

优势：前后端同域，天然避免跨域问题

4. CORS（跨域资源共享）

需后端配合设置响应头：

Access-Control-Allow-Origin: https://your-frontend.com
Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers: Content-Type, Authorization
Access-Control-Allow-Credentials: true  # 允许携带Cookie

前端代码示例：

// 需要携带凭证时
fetch('https://api-domain.com/data', {
  credentials: 'include' // 或 'same-origin'
});

三、特殊场景方案

5. JSONP（仅限 GET 请求）

function jsonp(url, callback) {
  const script = document.createElement('script');
  script.src = `${url}?callback=${callback}`;
  document.body.appendChild(script);
}

// 后端需返回：callbackName({ data: ... })
jsonp('http://backend.com/api', 'handleResponse');

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

6. WebSocket

const socket = new WebSocket('ws://backend-domain.com/socket');

socket.onmessage = (event) => {
  console.log('Received:', JSON.parse(event.data));
};

// 发送消息
socket.send(JSON.stringify({ action: 'getData' }));

7. postMessage（跨窗口通信）

主窗口：

// 发送消息到 iframe
document.querySelector('iframe').contentWindow.postMessage(
  { type: 'request', data: '需要传输的数据' },
  'https://target-domain.com'
);

iframe 接收方：

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

方案对比表

方案	适用场景	是否需要后端配合	安全性	请求类型支持
DevServer 代理	本地开发	否	高	所有
Nginx 代理	生产环境	否	高	所有
CORS	生产环境	是	中	所有
JSONP	旧浏览器兼容	是	低	仅 GET
WebSocket	实时通信	是	高	双向通信
postMessage	跨窗口通信	否	中	自定义消息
禁用浏览器安全策略	本地临时调试	否	极低	所有