常用的跨域方案有哪些？

在前端开发中，跨域（Cross-Origin）是一个常见问题，通常是由于浏览器的同源策略（Same-Origin Policy）限制导致的。为了解决跨域问题，前端开发者可以采用多种方案。

1. CORS（跨域资源共享）

CORS（Cross-Origin Resource Sharing）是浏览器支持的一种跨域解决方案，允许服务器声明哪些源可以访问资源。

• 服务器在响应头中添加 Access-Control-Allow-Origin 字段，指定允许访问的源。

• 对于复杂请求（如 PUT、DELETE 或带有自定义头的请求），浏览器会先发送一个 OPTIONS 预检请求。

Access-Control-Allow-Origin: https://example.com
Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers: Content-Type

优点

• 浏览器原生支持，无需额外配置。

• 安全性高，服务器可以精确控制允许访问的源。

缺点

• 需要服务器端支持。

• 对于复杂请求，会增加一次 OPTIONS 预检请求。

2. 代理服务器

通过代理服务器转发请求，绕过浏览器的同源策略。

• 前端请求同源的代理服务器，代理服务器将请求转发到目标服务器。

• 目标服务器返回响应后，代理服务器再将响应返回给前端。

Nginx 配置：

location /api/ {proxy_pass https://target-server.com/;
}

Node.js 实现：

const express = require('express');
const axios = require('axios');const app = express();app.use('/api', async (req, res) => {const response = await axios.get(`https://target-server.com${req.url}`);res.json(response.data);
});app.listen(3000, () => {console.log('Proxy server is running on port 3000');
});

优点

• 前端无需修改代码。

• 支持所有 HTTP 方法。

缺点

• 需要额外的服务器资源。

• 增加了系统的复杂性。

3. JSONP（JSON with Padding）

JSONP 是一种利用 <script> 标签不受同源策略限制的特性实现的跨域方案。

实现方式

• 前端动态创建一个 <script> 标签，src 指向目标服务器的 API，并传递一个回调函数名。

• 服务器返回一段 JavaScript 代码，调用前端定义的回调函数。

// 前端代码
function handleResponse(data) {console.log(data);
}const script = document.createElement('script');
script.src = 'https://example.com/api?callback=handleResponse';
document.body.appendChild(script);// 服务器返回
handleResponse({ name: 'John', age: 30 });

优点

• 兼容性好，支持老版本浏览器。

• 无需服务器端额外配置。

缺点

• 只支持 GET 请求。

• 安全性较低，容易受到 XSS 攻击。

4. WebSocket

WebSocket 是一种全双工通信协议，不受同源策略限制。

• 前端和后端通过 WebSocket 建立连接，进行双向通信。

// 前端代码
const socket = new WebSocket('wss://example.com');socket.onmessage = (event) => {console.log('Received:', event.data);
};socket.send('Hello Server');// 服务器代码（Node.js + ws 库）
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });wss.on('connection', (ws) => {ws.on('message', (message) => {console.log('Received:', message);ws.send('Hello Client');});
});

优点

• 实时性强，适合实时通信场景。

• 不受同源策略限制。

缺点

• 需要服务器端支持 WebSocket。

• 不适合传统的 HTTP 请求场景。

5. postMessage

postMessage 是 HTML5 提供的一种跨文档通信机制，可以在不同源的窗口之间传递消息。

• 使用 window.postMessage 发送消息，目标窗口通过 message 事件接收消息。

// 发送消息
const targetWindow = window.open('https://example.com');
targetWindow.postMessage('Hello', 'https://example.com');// 接收消息
window.addEventListener('message', (event) => {if (event.origin === 'https://example.com') {console.log('Received:', event.data);}
});

优点

• 支持跨域窗口通信。

• 安全性高，可以指定目标源。

缺点

• 只适用于窗口间的通信。

• 需要目标窗口配合。

总结

方案	适用场景	优点	缺点
CORS	前后端分离项目	浏览器原生支持，安全性高（推荐）	需要服务器端支持
JSONP	老版本浏览器兼容	兼容性好，无需服务器端配置（不推荐）	只支持 GET 请求，安全性低
代理服务器	前后端分离项目	前端无需修改代码，支持所有 HTTP 方法（推荐）	需要额外服务器资源
WebSocket	实时通信场景	实时性强，不受同源策略限制	需要服务器端支持
postMessage	跨窗口通信	支持跨域窗口通信，安全性高	只适用于窗口间通信

根据具体场景选择合适的跨域方案，可以有效解决浏览器的同源策略限制问题。