前端跨域解决方案有哪些？CORS 和 JSONP 的工作原理是什么？

跨域（Cross-Origin）：浏览器同源策略限制不同协议/域名/端口的资源访问。

常见解决方案：

1. JSONP（仅支持 GET）

• 原理：<script> 标签的 src 不受同源限制
• 步骤：前端动态创建 <script>，URL 上带回调函数名；服务端返回 callback(data) 执行

function jsonp(url, callbackName) {
  return new Promise((resolve) => {
    window[callbackName] = resolve;
    const script = document.createElement('script');
    script.src = `${url}?callback=${callbackName}`;
    document.body.appendChild(script);
  });
}

2. CORS（主流方案）

• 原理：服务端通过响应头告知浏览器允许跨域
• 关键头信息：
  • Access-Control-Allow-Origin: * 或具体域名
  • Access-Control-Allow-Methods: GET, POST, PUT, DELETE
  • Access-Control-Allow-Headers: Content-Type, Authorization
  • Access-Control-Allow-Credentials: true（允许 Cookie）

3. 代理转发（开发环境）

• Webpack devServer proxy / Vite proxy
• Nginx 反向代理

4. postMessage（跨窗口通信） 5. WebSocket（不受同源限制） 6. document.domain（同主域 iframe 通信，已过时）