- 什么是同源策略
- 同源的定义： 源：协议/版本号+域名+端口号。只有两个源完全一致，既称为同源。
- 同源策略的意义：同源策略是浏览器强制规定的，主要是用与保护用户的隐私。
比如黑客网站的js通过发送ajax请求，请求网站的用户信息，如果没有同源策略，由于黑客网站的请求和本网站的请求基本是一样的（只有referer不一样）。如果后台没有检查referer，那么黑客将可以访问到用户数据。黑客的请求可以成功发送，但是浏览器不会把数据给他 - 同源策略限制的是数据访问，我们引用js、css、图片的时候，并不知道其内容，只是在引用。
- 如何跨域
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);
})
}
- 面试回答JSONP
跨域的时候由于当前浏览器不支持CORS，必须选择其它方式进行跨域。这时候只能用script标签引用一个js文件，js文件会执行一个回掉，或者会对某个约定好的全局变量进行赋值，这时候就能够访问到跨域数据。
优点：兼容ie，可以跨域
缺点：由于他是script，所以不能像ajax那样读到精确的响应内容，只能知道成功或者失败。并且只能发get请求。
