跨域

148 阅读1分钟

同源

源 = 协议 + 域名 + 端口号

如果两个URL的协议、域名、端口号是一样的,那么称这两个URL是同源的。

注意:要完全一致。例如https://www.baidu.com、baidu.com 不同源。

跨域

为了保护隐私,浏览器限制了不同源网站之间的数据访问。

浏览器规定,如果JS「运行」在源A里,那么它只能获取源A的数据,不能获取源B的数据,即不允许跨域

注意:获取和引用的区别。我们在引用CSS、JS、图片时,其实并不知道其内容,只是引过来,没有访问它的数据。

通过CORS和JSONP可以实现跨域。

CORS跨域

如果qq.com要允许baidu.com访问它的数据

提前声明一下即可

qq.com后端在响应头里声明[允许baidu.com访问]即可。

response.setHeader("Access-Control-Allow-Origin", "https://baidu.com");

JSONP跨域

在无法使用CORS时,使用JSONP跨域。

实现方法

因为可以随意引用JS

让 qq.com 的后端把 baidu.com 想要访问的数据包在JS里

然后 baidu.com 用 script 标签引用 JS

JS执行

执行什么呢?

baidu.com 提前定义了一个window.xxx函数

JS 执行window.xxx(数据)

baidu.com 通过window.xxx函数拿到了数据。