如何实现跨域通信

跨域是指浏览器的同源策略限制，当前域名的 JavaScript 代码试图访问其他域名下的资源时会受到限制。

• CORS（跨域资源共享）
  • 服务器设置 Access-Control-Allow-Origin 等响应头
  • 可以配置允许的请求方法、请求头、是否允许携带认证信息等
  • 最常用的跨域解决方案
• JSONP
  • 利用 <script> 标签不受同源策略限制的特点
  • 只支持 GET 请求
  • 需要服务器配合返回 JavaScript 代码，由此导致可能的 XSS 攻击
• 代理服务器
  • 开发环境：webpack-dev-server、vite 等的 proxy 配置
  • 生产环境：Nginx 反向代理
• postMessage
  • HTML5 标准中的 API
  • 用于不同窗口间的跨域通信
  • 可以在父子页面（iframe）或者多窗口间通信
• WebSocket
  • 建立在 TCP 之上的协议
  • 天然支持跨域
  • 适合需要实时通信的场景
• document.domain（已废弃）
  • 仅适用于主域名相同的情况
  • 将子域和主域的 document.domain 设为相同的主域
• 最佳实践：
  • 优先使用 CORS，配置得当的情况下最安全
  • 需要兼容旧浏览器时可以考虑 JSONP
  • 开发环境优先使用代理服务器
  • 特殊场景（如页面通信）可以考虑 postMessage
  • 需要实时通信时使用 WebSocket