什么是跨域?
跨域,指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器施加的安全限制。
什么是同源策略?
- 同源定义
源=协议+域名+端口号(window.origin或location.origin可以得到当前源)
同源:如果两个url的协议、域名、端口号完全一致,那么这两个url就是同源的。
例如:
https://qq.com
https://www.qq.com
这两者就不是同源的,完全一致的才算同源。
-
同源策略(不同源的页面之间,不准互相访问数据)
浏览器规定如果JS运行在源A里,那么就只能获取源A的数据,不能获取源B的数据,即不允许跨域。
例如(此处省略http协议):假设frank.com/index.html引用了cdn.com/1.js,则可以说1.js运行在源frank.com里(注意这跟cdn.com没有关系,虽然1.js从它那里下载)所以可以看出来1.js就只能获取frank.com的数据,不能获取1.frank.com的数据。 -
这么做的目的是什么?
为了保护用户隐私。
怎么跨域?
- 问题根源
1、浏览器默认不同源之间不能互相访问数据
2、但是qq.com和frank.com其实都是自己的网站
3、我想让两个网站互相访问,浏览器为什么要组织
解法一 用CORS
如果要共享数据,需要提前声明,如何声明呢?
具体语法
Access-Control-Allow-Origin:(允许访问的网址)
详情参考:(https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Origin)
解法二 JSONP
(主要是用来兼容IE的)
客户端在 HTML 中动态生成 script 标签,在 “src” 中引入请求的 URL + 回调函数,这样请求服务器返回的数据会交由回调函数处理,这样就实现了跨域读请求;服务端在接收到客户端请求后,首先取得客户端要回调的函数名,再生成 JavaScript 代码段返回给浏览器,浏览器在获取到返回结果后直接调用回调函数完成任务。
- 例如frank.com访问qq.com
1、qq.com将数据写到/frank.js
2、frank.com用script标签引用/frank.js
3、/frank.js执行,执行什么呢?
4、frank.com事先定义好window.xxx函数
5、/frank.js执行window.xxx({frinds:[....]})
6、然后frank.com就通过window.xxx获取到数据了
(window.xxx就是一个回调)
扩展
为什么可以跨域使用CSS、JS和图片等?
同源策略限制的是数据访问,我们引用CSS、JS和图片的时候,其实并不知道其内容,我们只是在引用。(如果可以跨域使用的话那你知道CSS的第一个字符是什么吗?)
网友评论