跨域 CORS JSONP

1. 什么是同源策略

• 同源的定义： 源：协议/版本号+域名+端口号。只有两个源完全一致，既称为同源。
• 同源策略的意义：同源策略是浏览器强制规定的，主要是用与保护用户的隐私。
  比如黑客网站的js通过发送ajax请求，请求网站的用户信息，如果没有同源策略，由于黑客网站的请求和本网站的请求基本是一样的（只有referer不一样）。如果后台没有检查referer，那么黑客将可以访问到用户数据。黑客的请求可以成功发送，但是浏览器不会把数据给他
• 同源策略限制的是数据访问，我们引用js、css、图片的时候，并不知道其内容，只是在引用。

2. 如何跨域
   2.1 CORS
   语法很简单，在响应头加上Access-Conrtol-Allow-Orign:允许被访问的源
   但是不兼容ie
   2.2 JSONP
   JSONP是为了兼容ie所采用的跨域方法。
   举例说明：

• a网站想访问b网站的user.json文件，b网站也同意了，但是在ie上面是无法跨域的。
• 但是a网站是可以通过script标签引用b网站的js文件的，因此可以把b网站的user.json文件套一层js。
• 具体做法就是：b网站新建一个user.js文件，文件里面只写windows.xxx={{data}}。然后服务器增加一个/user.js的路由，获取本地user.js和user.json的数据，并将它们转为字符串把然后user.js里面的{{data}}和user.json的字符串replace，因此最后发送的响应体就是window.xxx=user.json.toString()。
  *这时候b网站只需要把路径告诉a网站，以及xxx的具体值，a网站就可以访问到b网站的user.json数据了。
• 缺点是如果路径还有变量名被其他网站盗取了，那么其他网站也能访问到该数据，改进方法就是通过设置响应头referer，实现JSOPN定向分享。

2.3 JSONP的优化与封装
优化的第一步就是不要把变量名xxx写死：

• 还是上面那个例子，首先a网站生成一个随机数，然后把随机数挂在windows上面：windows[random]，然后在把fileNane=random放在查询参数上面传给网站b。
• 网站b通过查询参数，能得到a网站传递过来的随机数，这时候修改user.js文件，改为windows[{{xxx}}]={{data}}，然后在把{{xxx}}repalce为所得到的随机数即可。

其次，拿到数据后，可以把该script标签删掉。
监听script的onload事件，回调函数写script.remove()

把JSOPN封装成函数jsonp(url).then()

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

3. 面试回答JSONP
   跨域的时候由于当前浏览器不支持CORS，必须选择其它方式进行跨域。这时候只能用script标签引用一个js文件，js文件会执行一个回掉，或者会对某个约定好的全局变量进行赋值，这时候就能够访问到跨域数据。
   优点：兼容ie，可以跨域
   缺点：由于他是script，所以不能像ajax那样读到精确的响应内容，只能知道成功或者失败。并且只能发get请求。