同源策略
浏览器故意设计的一个功能限制,只要在浏览器打开页面,就默认遵守同源策略
同源定义:
源:你在控制台输入window.origin或者location.origin可以得到当前的源
源 = 协议+域名+端口号
如果两个URL的协议,域名,端口号完全一致,那么这两个URL就是同源的
同源策略:
-
定义:不同源的页面之间,不准互相访问数据
-
浏览器规定:如果JS运行在源A里,那么就只能获取源A的数据,不能获取源B的数据,即不允许跨域
-
举栗子
假设新建Jack.com/index.html 引用了cdn.com/1.js
那么就说1.js就只能运行在源juck.com里
注意这跟cdn.com没有关系,虽然1.js从它那里下载
所以1.js就只能获取jack.com的数据
不能获取1.jack.com或者qq.com的数据
- 注意:这是浏览器的功能,浏览器故意这么设计的
浏览器这么做的原因是?
为了保护用户隐私和数据安全,如果有浏览器不限制就是浏览器的bug.
缺点是很多时候前端需要访问另一个域的后端接口,会被浏览器阻止其获取响应
我们假设没有同源策略:
问题的根源:浏览器无法区分发送者
检查referer, HTTP 协议在请求(request)的头信息里面,设计了一个Referer字段,给出"引荐网页"的 URL
但是很多人并不知道要检查referer,所以需要浏览器强制不同页面不准互相访问数据
其他疑问:
现实中,往往需要做到跨域共享,面试官问:如何做到跨域?
解法一: CORS
CORS
突破浏览器限制的一个方法
应用场景:heike.com和jack.com都是我的网站,我想让他们可以互相访问,但浏览器默认不同源之间不能互相访问,现在该怎么办?
用CORS,浏览器说你想要共享数据需要提前声明,该怎么声明?具体语法是?
Access-Control-Allow-Origin:http://域名
具体看MDN文档: 跨源资源共享(CORS) - HTTP | MDN (mozilla.org)
但是IE不支持,于是有了第二种解法:JSONP
JSONP
IE6 7 8 9 不支持 CORS,所以没有CORS,怎么跨域?
记不记得我们可以随意访问JS,但JS又不是数据,我们让JS包含数据再引用不就行了...
步骤如下:
后续待补充,如何封装JSONP