深入解析跨域问题及其解决方案：从原理到代码实践

news2025/3/10 7:13:04

跨域问题是前端开发中常见的安全限制问题，主要源于浏览器的同源策略（Same-Origin Policy）。同源策略限制了从一个源加载的文档或脚本如何与另一个源的资源进行交互。为了更深入地理解跨域问题及其解决方案，我们需要从原理、限制条件以及具体解决方案等多个角度进行分析。

1. CORS（跨域资源共享）

1.1 简单请求的 CORS 处理

前端代码：

fetch('https://api.example.com/data', {
    method: 'GET',
    headers: {
        'Content-Type': 'text/plain'
    }
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));

服务器响应头：

Access-Control-Allow-Origin: https://www.example.com

1.2 非简单请求的 CORS 处理

前端代码：

fetch('https://api.example.com/data', {
    method: 'PUT',
    headers: {
        'Content-Type': 'application/json',
        'Authorization': 'Bearer token'
    },
    body: JSON.stringify({ key: 'value' })
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));

服务器响应头：

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

1.3 携带 Cookie 的跨域请求

前端代码：

fetch('https://api.example.com/data', {
    method: 'GET',
    credentials: 'include'
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));

服务器响应头：

Access-Control-Allow-Origin: https://www.example.com
Access-Control-Allow-Credentials: true

2. JSONP（JSON with Padding）

2.1 实现原理

前端代码：

function handleResponse(data) {
    console.log(data);
}

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

服务器返回：

handleResponse({ name: 'Alice', age: 25 });

3. 代理服务器

3.1 使用 Nginx 实现代理

Nginx 配置：

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

前端代码：

fetch('/api/data', {
    method: 'GET'
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));

3.2 使用 Node.js 实现代理

Node.js 代码：

const http = require('http');
const httpProxy = require('http-proxy');

const proxy = httpProxy.createProxyServer({});

http.createServer((req, res) => {
    proxy.web(req, res, { target: 'https://api.example.com' });
}).listen(3000);

前端代码：

fetch('http://localhost:3000/api/data', {
    method: 'GET'
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));

4. WebSocket

4.1 实现实时通信

前端代码：

const socket = new WebSocket('wss://api.example.com');

socket.onopen = function() {
    console.log('WebSocket connection established.');
    socket.send('Hello Server!');
};

socket.onmessage = function(event) {
    console.log('Message from server:', event.data);
};

socket.onclose = function() {
    console.log('WebSocket connection closed.');
};

5. postMessage

5.1 跨文档通信

父页面代码：

const iframe = document.getElementById('iframe');
iframe.contentWindow.postMessage('Hello', 'https://child.example.com');

子页面代码：

window.addEventListener('message', function(event) {
    if (event.origin === 'https://parent.example.com') {
        console.log('Message from parent:', event.data);
    }
});