JSONP、CORS、跨域

跨域

同源：两个文档同源需满足：协议、域名、端口相同
跨域：不同域之间相互请求资源，就算作“跨域“。
js进行DOM操作、通信时如果目标与当前窗口不满足同源条件，浏览器为了安全会阻止跨域操作。

JSONP

JSONP是通过 script 标签加载数据的方式去获取数据当做 JS 代码来执行
提前在页面上声明一个函数，函数名通过接口传参的方式传给后台，后台解析到函数名后在原始数据上「包裹」这个函数名，发送给前端。换句话说，JSONP 需要对应接口的后端的配合才能实现。

在跨域时，由于某些条件或当前浏览器不支持CORS，我们必须使用另外一种方式来跨域。于是，我们就请求一个JS文件，JS文件执行一个回调，回调里面就有我们的数据。回调名字可以随机生成，是一个随机数，以callback参数传给后台，后台会把函数再次返回并执行。

//去创建一个script标签
const  script = document.createElement("script");
//script的src属性设置接口地址 并带一个callback回调函数名称
script.src = "http://127.0.0.1:8888/index.php?callback=jsonpCallback";
//插入到页面
document.body.appendChild(script);
//通过定义函数名去接收后台返回数据
function jsonpCallback(data){
    //注意  jsonp返回的数据是json对象可以直接使用
    //ajax  取得数据是json字符串需要转换成json对象才可以使用。
}

优点：

兼容IE
可以跨域

缺点：

由于 script 标签，无法读取状态码
script标签只能发送 GET请求，不支持 POST

封装JSONP

function jsonp(url) {
  return new Promise((resolve, reject) => {
    const random = "JSONPCallbackName" + Math.random();
    window[random] = data => {
      resolve(data);
    };
    const script = document.createElement("script");
    script.src = `${url}?callback=${random}`;
    script.onload = () => {
      script.remove();
    };
    script.onerror = () => {
      reject();
    };
    document.body.appendChild(script);
  });
}

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

CORS

CORS 全称是跨域资源共享（Cross-Origin Resource Sharing），是一种 ajax 跨域请求资源的方式。

使用 XMLHttpRequest 发送请求时，浏览器发现该请求不符合同源策略，会给该请求加一个请求头：Origin，后台进行一系列处理，如果确定接受请求则在返回结果中加入一个响应头：Access-Control-Allow-Origin; 浏览器判断该相应头中是否包含 Origin 的值，如果有则浏览器会处理响应，我们就可以拿到响应数据，如果不包含浏览器直接驳回，这时我们无法拿到响应数据。
原理：服务器设置Access-Control-Allow-OriginHTTP响应头之后，浏览器将会允许跨域请求

Access-Control-Allow-Origin: *              //允许所有域名访，或者
Access-Control-Allow-Origin: http://a.com   //只允许指定域名访问

JSONP、CORS、跨域

跨域

JSONP

封装JSONP

CORS

postMessage