除了JSONP，还有哪些常用的跨域解决方案？

在现代Web开发中，跨域资源共享（CORS）已成为主流的跨域解决方案，同时还有其他多种技术可以根据具体场景选择使用。以下是常见的跨域解决方案及其特点：

1. CORS（跨域资源共享）

原理：服务器通过设置响应头（如Access-Control-Allow-Origin）明确允许跨域访问。

特点：

• 推荐方案：现代浏览器标准，支持所有HTTP方法。
• 需要服务器配合：前端无需特殊处理，只需正常发送请求。
• 安全性高：可精确控制允许的域名、方法和头部。

示例（Node.js服务器）：

res.setHeader('Access-Control-Allow-Origin', 'https://example.com');
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT');
res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');

2. JSONP（JSON with Padding）

原理：利用<script>标签不受同源策略限制的特性，通过动态创建script标签实现跨域。

特点：

• 兼容性好：支持IE等旧浏览器。
• 仅支持GET请求：局限性较大。
• 需要后端配合：返回包裹在回调函数中的JSON数据。

3. 代理服务器（Proxy Server）

原理：在同源域名下部署一个后端服务，作为中间层转发请求到目标服务器。

特点：

• 前端透明：只需修改请求URL指向代理服务器。
• 灵活性高：可处理复杂请求和认证。
• 部署成本：需要额外维护一个后端服务。

示例（Vue/React开发环境配置）：

// vue.config.js
module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'https://api.example.com',
        changeOrigin: true,
        pathRewrite: { '^/api': '' }
      }
    }
  }
};

4. postMessage API

原理：用于窗口间（如iframe、window.open）的跨域通信。

特点：

• 双向通信：支持父子窗口间传递消息。
• 需要手动处理消息：通过window.postMessage()和message事件监听。

示例（父窗口→iframe）：

// 父窗口
const iframe = document.querySelector('iframe');
iframe.contentWindow.postMessage('Hello from parent!', 'https://child-domain.com');

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

5. WebSocket

原理：基于ws://或wss://协议，不受同源策略限制。

特点：

• 全双工通信：实时性强，适合实时应用（如聊天、监控）。
• 独立协议：需要专门的WebSocket服务器。

示例：

const socket = new WebSocket('wss://api.example.com');
socket.onmessage = (event) => console.log('Received:', event.data);
socket.send('Hello, server!');

6. nginx反向代理

原理：在服务器端配置nginx，将跨域请求转发到目标地址。

特点：

• 生产环境常用：性能高，不依赖前端代码。
• 配置简单：只需修改nginx.conf。

示例（nginx配置）：

server {
  listen 80;
  server_name example.com;

  location /api/ {
    proxy_pass https://third-party-api.com/;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
  }
}

7. HTML5 Web Storage + hashchange

原理：利用iframe在同源域名下存储数据，通过监听URL hash变化触发通信。

特点：

• 兼容性好：支持较旧的浏览器。
• 数据容量限制：Storage通常为5MB。

选择建议

• 优先使用CORS：现代浏览器完全支持，安全且功能完整。
• 开发环境：使用代理服务器（如webpack dev server）简化调试。
• 旧浏览器兼容：考虑JSONP。
• 实时通信：使用WebSocket。
• 窗口间通信：使用postMessage。

根据具体场景选择合适的方案，通常CORS和代理服务器是最常用的解决方案。