同源及同源策略

同源指如果两个URL的协议、域名、端口号（不指定的话默认为80端口号）完全一致，路径可以不一致，那么这两个url就是同源的如：www.baidu.com 和 https:baidu.com 不同源，不同源的页面之间不能互相访问数据。
同源策略/SOP（Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。web构建在同源策略基础之上，浏览器对非同源脚本的限制措施是对同源策略的具体实现
同源策略限制以下行为：

Cookie、LocalStorage 和 IndexDB 无法读取
DOM 和 Js对象无法获得
AJAX请求发送后被浏览器拦截

跨域

跨域请求就是指：当前发起请求的域与该请求指向的资源所在的域不一样。这里的域指的是协议 + 域名 + 端口号均相同。会受到同源策略的限制。

CROS

CORS是实现跨域的一种方式，需要浏览器和后端同时支持。但不兼容IE6、7、8、9
服务端设置 Access-Control-Allow-Origin 就可以开启 CORS。该属性表示哪些域名可以访问资源，如果设置通配符则表示所有网站都可以访问资源。即在响应头添加response.setHeader("Access-Control-Allow-Origin", "域名");

JSONP

原理：JSONP是一种非官方的跨域数据交互协议,本质上是利用 <script><img><iframe> 等标签不受同源策略限制，可以从不同域加载并执行资源的特性，来实现数据跨域传输。
优缺点：优点是兼容性更好，在更加古老的浏览器中都可以运行。缺点是：它只支持 GET 请求，而不支持 POST 请求等其他类型的 HTTP 请求，不安全可能会遭受XSS攻击。
过程：JSONP 的过程就是，与服务端约定好一个回调函数名，服务端接收到请求后，将返回一段 Javascript，在这段 Javascript 代码中调用了约定好的回调函数，并且将数据作为参数进行传递。当网页接收到这段 Javascript 代码后，就会执行这个回调函数，这时数据已经成功传输到客户端了。封装：

function jsonp(url) {
    return new Promise((resolve, reject) => {
        const random = "duhengJSONPCallbackName" + 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)
});

跨域简述

同源及同源策略

跨域

CROS

JSONP