同源
源 = 协议 + 域名 + 端口号
如果两个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函数拿到了数据。