解决跨域问题的案列

JSONP（JSON with Padding）

JSONP 是一种通过 <script> 标签的跨域请求方法，它依赖于服务器支持并返回特定格式的响应。

示例：

前端：

<script>
function jsonpCallback(data) {console.log('Received data:', data);
}var script = document.createElement('script');
script.src = 'https://api.example.com/data?callback=jsonpCallback';
document.body.appendChild(script);
</script>

后端（假设）：

// 伪代码，实际取决于后端技术
res.send(`jsonpCallback(${JSON.stringify(data)})`);

CORS（跨源资源共享）
- CORS 实际上是一种由服务器实现的跨域解决方案，但前端需要发送适当的请求头（如 Origin），并检查响应头（如 Access-Control-Allow-Origin）以确认是否允许跨域。
- 前端：通常不需要做特别的事情，除非你需要发送预检请求（如使用 OPTIONS 方法）。
- 后端（Node.js/Express 示例）：
```
const cors = require('cors');app.use(cors({origin: 'http://example.com', // 限制特定来源，或设置为 '*' 来允许任何来源optionsSuccessStatus: 200 // 某些遗留浏览器需要
}));app.get('/data', (req, res) => {res.json({ msg: 'This is CORS-enabled for a specific source' });
});
```
代理服务器
- 使用代理服务器（如 Nginx、Apache 或在开发环境中使用 Webpack DevServer、Node.js 代理等）来转发请求。
- Nginx 示例（配置部分）：
```
location /api/ {proxy_pass http://api.example.com/;proxy_http_version 1.1;proxy_set_header Upgrade $http_upgrade;proxy_set_header Connection 'upgrade';proxy_set_header Host $host;proxy_cache_bypass $http_upgrade;
}
```
- 在前端代码中，你可以像访问本地资源一样访问 /api/ 路径，而 Nginx 会将其转发到实际的 API 服务器。

postMessage（对于不同窗口或框架）

如果你在控制两个不同的页面或框架（如 iframe），并且它们之间需要通信，可以使用 window.postMessage 方法。

示例：

// 在父页面
window.frames[0].postMessage('Hello, child!', '*');// 在子页面（iframe）
window.addEventListener('message', function(event) {if (event.origin !== 'http://expected-origin.com') return;console.log('Message from parent:', event.data);
}, false);

WebSockets
- WebSockets 提供了一个全双工的通信渠道，但它本身不直接解决跨域问题。然而，WebSocket 服务器可以配置为接受来自任何源的连接，而前端则不需要担心同源策略。
- 注意：虽然 WebSocket 连接可以跨域，但初始的 HTTP 握手请求仍然受同源策略限制，除非服务器配置了 CORS。