有关跨域我们有三个关键的知识点：同源策略、CORS、JSONP
同源策略
源
源：协议+域名+端口号
如何查看当前源？
Window.origin或者location.origin可以得到当前的源
同源
顾名思义，两个URL的协议、域名和端口号完全一致那么这两个URL就是同源。
注意：https://baidu.com 和 https://www.baidu.com是不同源，因为必须要做到完全一致。
同源策略
浏览器规定：如果JS运行在源A里，那么就只能获取源A的数据，不能获取源B的数据，即不允许跨域。这是浏览器的功能。
举例：
假设frank.com/index.html内引入了cdn.com/1.js
那么就是1.js运行在源frank.com里，即使1.js从cdn.com下载，但源依然是frank.com
所以1.js只能获取frank.com的数据
浏览器为了主动预防头数据的问题，设置了严格的同源策略。
一些疑问：同源策略限制的是数据的访问，当我们引入CSS、JS、图片时，我们并不知道其中的内容，仅仅是引用而已。可以执行，但不能读取内容。
CORS
那么我们如何进行跨域操作呢？
方法一：使用CORS
CORS（Cross-origin resource sharing） “跨域资源共享”
跨源资源共享CORS（或通俗地译为跨域资源共享）是一种基于 HTTP 头的机制，该机制通过允许服务器标示除了它自己以外的其它 origin（域，协议和端口），使得浏览器允许这些 origin 访问加载自己的资源。
我们想让frank.com 用 AJAX 请求 qq.com 的 /friends.json那么我们就在qq.com的后台上加上
response.setHeader("Access-Control-Allow-Origin”, "http://frank.com:9999”);
即可实现跨域。
JSONP
没有CORS又需要跨域的时候用JSONP
虽然我们没有办法访问其他源的数据，但是我们可以随意的引用JS，那么我们只需要让JS包含数据即可
最基本的做法：
const script = document.createElement("script”);//创建一个script标签
script.src = "[http://qq.com:8888/friends.js](http://qq.com:8888/friends.js)”;//引用地址
script.onload = () => {
console.log(window.xxx);//成功则打印xxx
};
document.body.appendChild(script);//把script标签插入body中
如果JSONP定向分享需要在后台加入
if (request.headers["referer"].indexOf("[http://xxx.com:xxxx](http://frank.com:9999)") === 0){}else{
response.statusCode = 404;
response.end();
}
window.xxx名字可以随便改，只要frank.com定义的函数名和qq.com/friends.js执行的函数名一致即可
我们直接封装成jsonp.(‘url’).then(f1,f2)
过程如下：
function jsonp(url) {
return new Promise((resolve, reject) => {
//封装成promise
const random = "frankJSONPCallbackName" + Math.random(); //生成随机数
window[random] = (data) => {
//定义全局名字
resolve(data); //成功即调用resole
};
const script = document.createElement("script"); //创建script标签
script.src = `${url}?callback=${random}`; //等于传来的url加上这个随机数 （避免名字重复）
script.onload = () => {
script.remove(); //监听onload事件，如果onload了就把这个标签移除掉
};
script.onerror = () => {
reject(); //失败调用reject
};
document.body.appendChild(script);
});
}
//使用jsonp
jsonp("[http://qq.com:8888/friends.js](http://qq.com:8888/friends.js)").then((data) => {
console.log(data);
});
什么是JSONP呢？
我们在跨域的时候，由于当前浏览器不支持CORS，或者因为某些条件不支持CORS，我们必须使用一种方法来进行跨域。于是我们请求一个JS文件，这个JS文件回执行一个回调，回调里面有我们的数据。
这个回调的名字是什么？
回调的名字可以通过随机数生成的，我们把这个随机数以callback的参数传给后台，后台会把函数返回给我们并且执行
缺点：由于它是一个script标签，所以读不到AJAX那么精确的status值，无法知道状态码是什么，也只能发送GET请求，JSONP不支持POST
网友评论