定义

浏览器规定运行在源 A 中的资源只能从源 A 中获取数据，不能从非同源的地址获取数据(允许引用)，即不允许跨域

目的

  • 保证用户信息的安全，防止恶意的网站窃取数据。

    如何跨域

    CORS(跨域资源共享):请求非同源的链接的文件

  • 简单请求

    • 在后台设置 response.setHeader(‘Access-Control-Allow-Origin’,url)

  • 非简单请求

    • 在正式通信之前，增加一次 HTTP 查询请求，称为”预检”请求（preflight）。一旦服务器通过了”预检”请求，在Access-Control-Max-Age指定的时间内，以后每次浏览器正常的CORS请求，就都跟简单请求一样，会有一个Origin头信息字段。服务器的回应，也都会有一个Access-Control-Allow-Origin头信息字段。

      JSONP(IE)：利用 src 属性的开放原则引用数据

  • 含义：在跨域时因为某些原因无法使用 CORS，于是利用 src 属性的开放原则引用一个 JS 文件，JS 文件会执行一个回调，回调里会储存需要的数据

  • 优点：可以跨域，兼容IE
  • 缺点：
    • 因为使用 src 标签 不能获取状态码和 header
    • 不支持 POST 请求

  • 步骤：

    • A 网站访问 B 网站
    • B 在后台将数据写到 A 访问的文件中
    • A 用 script 标签引用要访问的文件

    • 文件执行，执行什么呢？

      • B 在后台执行事先定义好 xxx 函数，并传参

        1. xxx({{data}})  //data 替换为数据

      • 然后 A 可以就通过 window.xxx 获取到数据了

        1. window.xxx =(data)=>{console.log(data)}

    • window.xxx 就是一个跨域名的回调

  • 代码 ```javascript function jsonp(url) { return new Promise((resolve, reject) => { const random = “callbackName” + Math.random(); //防止命名冲突 window[random] = (data) => {
    1. resolve(data);
    }; const script = document.createElement(“script”); script.src = ${url}?callback=${random}; //作为查询参数传给后台 script.onload = () => { script.remove() } script.onerror = () => {
    1. reject();
    }; document.body.appendChild(script); }); }

jsonp(“http://qq.com:8888/friends.js").then((data) => { console.log(data); }); ```