作为前端开发者，跨域问题就像一道绕不开的坎。今天我要分享自己解决跨域问题的完整经验，涵盖8种实用方案和真实应用场景。
1. CORS：最标准的跨域方案
CORS通过在服务端设置响应头实现跨域访问，这是我的首选方案。
// Node.js后端设置示例
app.use((req, res, next) => {
res.setHeader('Access-Control-Allow-Origin', '*');
res.setHeader('Access-Control-Allow-Methods', 'GET,POST,PUT,DELETE');
res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
next();
});
记得在一次电商项目中，我就是通过这种方式解决了前端调用支付接口的跨域问题。
2. JSONP：传统但有效的方案
JSONP利用script标签的特性实现跨域请求，适合老项目维护。
function handleResponse(data) {
console.log('获取到的数据:', data);
}
const script = document.createElement('script');
script.src = 'https://api.example.com/data?callback=handleResponse';
document.body.appendChild(script);
3. 代理服务器：开发环境救星
开发时，我习惯用代理解决跨域，省去很多麻烦。
// vite.config.js
export default {
server: {
proxy: {
'/api': {
target: 'http://backend-service.com',
changeOrigin: true,
rewrite: path => path.replace(/^/api/, '')
}
}
}
}
4. WebSocket：实时通信首选
WebSocket协议不受同源策略限制，我的实时聊天项目就用的它。
const socket = new WebSocket('wss://echo.websocket.org');
socket.onopen = function() {
console.log('WebSocket连接已建立');
socket.send('Hello Server!');
};
5. postMessage：跨窗口通信利器
不同源的iframe通信，我都是用postMessage解决的。
// 发送消息
const popup = window.open('https://other-domain.com');
popup.postMessage('需要传递的消息', 'https://other-domain.com');
6. Nginx反向代理：生产环境标配
部署时，Nginx反向代理是我的不二之选。
location /api {
proxy_pass http://backend-service.com;
add_header Access-Control-Allow-Origin *;
}
7. document.domain：子域跨域方案
主域相同子域不同时，这个方案帮了我大忙。
// 在a.example.com和b.example.com中设置
document.domain = 'example.com';
8. 浏览器临时方案（仅开发）
调试时偶尔会用，但切记不要在生产环境使用！
chrome --disable-web-security --user-data-dir=/tmp/chrome-test
我的实战经验总结
开发阶段：代理服务器最方便上线部署：CORS或Nginx最可靠特殊需求：根据场景选择WebSocket等方案
通过这几种方法的灵活运用，我已经能够应对各种跨域场景。建议收藏这篇文章，遇到跨域问题时对照参考，一定能找到适合的解决方案。
大家在实际项目中还遇到过哪些棘手的跨域问题？欢迎在评论区分享你的解决经验！