跨域、CORS、JSON

有关跨域我们有三个关键的知识点:同源策略、CORS、JSONP


同源策略

源:协议+域名+端口号
如何查看当前源?
Window.origin或者location.origin可以得到当前的源

同源

顾名思义,两个URL的协议、域名和端口号完全一致那么这两个URL就是同源。
注意:https://baidu.comhttps://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

推荐阅读更多精彩内容