跨域的知识点
同源策略
- 浏览器故意设置的功能限制
CORS
- 突破浏览器限制的一个方法
JSONP
- IE时代的妥协
同源定义
源
- window.origin或location.origin可以得到当前源
- 源 = 协议 + 域名 + 端口号
如果两个url的
- 协议
- 域名
- 端口号
- 完全一致，那么两个url就是同源
同源策略
浏览器规定
- 如果js运行在源A里，那么就只能获取源A的数据
- 不能获取源B的数据，即不允许跨域
例子
- test.com/index.html引用了cdn.com/1.js
- 那么说1.js运行在test.com里
- 注意cdn.com没有关系，虽然1.js从它那下载
- 所以1.js就只能获取test.com的数据
- 不能cdn.com的数据
这就是浏览器的功能
- 浏览器故意这样设计的
目的
保护用户
为什么a.test.com和test.com算跨域
- 因为历史上，出现不同公司共用域名，a.qq.com和qq.com不一定是同一个网站，浏览器认为这是不同的源
不同端口也是跨域
- 有可能一个公司一个端口
为什么可以跨域使用css、js和图片
- 同源策略限制是数据访问，我们引用css、js和图片的时候，其实并不知道内容，只是在引用。
解决方法
cors
问题根源
- 浏览器默认不同源之间不能互相访问数据
使用cors
- 需要共享数据，需要提前声明
- Access-Control-Allow-Origin: 可以跨域网站
JSONP
定义
- JSONP和JSON没有关系
问题
- 需要跨域，但是不能使用cors
- 通过js包含数据
缺点
- 只支持get请求，不支持post请求
- 不知道返回的状态码
