JSONP、CORS、跨域

跨域

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

JSONP

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

//去创建一个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 跨域请求资源的方式。

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

postMessage