跨域

目录

• 一、同源策略
  • 什么是同源策略
  • 不受同源策略约束的场景
• 二、跨域
  • JSONP
    • 定义
    • 前提
    • 实现一 （原生）
    • 实现二 （jQuery）
    • 参考
  • CROS
    • 实现
    • 参考
  • 注意

一、同源策略

什么是同源策略

出于安全考虑，浏览器要求：ajax请求的 协议、域名、端口，必须与当前页面的一致。
它是由 Netscape 提出的一个著名的安全策略，现在所有支持 JavaScript 的浏览器都会使用这个策略。

不受同源策略约束的场景

二、跨域

JSONP

定义

Jsonp(JSON with Padding) 既返回json数据的包装，是 json 的一种"使用模式"，为了实现跨域读取数据。

前提

1. 实现二 （jQuery）

   $.ajax({
       url: 'http://xxx.yyy/aaa.js',
       dataType: 'jsonp',
       jsonpCallback: 'callback', // 自定义回调函数名称，默认为jQuery生成随机名
       success: function(data) {
           console.log(data);
       },
       error: function() {
           console.log('fail');
       }
   })
   

   参考

   https://www.ruanyifeng.com/blog/2016/04/same-origin-policy.html

   CROS

   实现

   服务端设置 HTTP Header

   response.setHeader("Access-Control-Allow-Origin", "http://www.xyz.com:8000"); // 允许跨域的域名，不建议写 "*"
   response.setHeader("Access-Control-Allow-Headers", "X-Requested-With");
   response.setHeader("Access-Control-Allow-Methods", "PUT,POST,GET,OPTIONS,DELETE");
   
   response.setHeader("Access-Control-Allow-Credentials", "true"); // 接收跨域的 cookie
   

   服务端配置好CROS后，前端不需要特别设置，直接请求就可以。

   参考

   http://www.ruanyifeng.com/blog/2016/04/cors.html

   注意

   • 所有的跨域，都必须经过 Server 端的允许和配合；
   • 未经 server端允许就实现跨域，说明浏览器有漏洞；