跨域通信 ​

允许跨域通信 ​

常见的跨域通信处理方式

• 服务端请求：同源策略是 浏览器 行为，服务端不受影响
  • 配置 nginx，或搭建本地服务
  • 一般用于开发阶段
• JSONP：利用 <script> 允许跨源的特点，后端返回脚本字符串(方法(数据))，前端加载后执行
  • 一般用于访问第三方服务提供接口查询服务
  • 只支持 get ，易受 XSS 攻击，存在安全问题
• postMessage：利用 H5 消息通信处理 父子页面交互
  • 发送消息需要获取到目标源，target.postMessage(message, origin)
  • 接收消息需要监听全局事件，window.addEventLister('message', e => { e.data })
  • 通常用于内嵌 iframe 的场景，如 应用平台、H5 游戏平台、商户平台 等
• CORS：服务端设置允许跨域访问的规则
  • 通过配置 Access-Control-Allow- 相关字段，允许跨域资源访问
  • 常见字段有 Origin、Methods、Headers、Credentials 等
  • 通常用于开发阶段、第三方服务商、项目域名迁移 等
• document.domain: 通过设置相同的二级域名，将跨域页面设置为同域
  • 只能用于一二级域名相同的情况
  • 如 a.xxx.com 和 b.xxx.com，设置 document.domain = 'xxx.com'

阻止跨域访问 ​

• 确保资源是不可嵌入的
• 检测 CSRF 标记