1. 什么是跨域(同源策略)
同源策略:限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制
同源的定义:如果两个页面的协议,端口(如果有指定)和主机都相同,则两个页面具有相同的源。我们也可以把它称为“协议/主机/端口 tuple”,或简单地叫做“tuple". (“tuple” ,“元”,是指一些事物组合在一起形成一个整体,比如(1,2)叫二元,(1,2,3)叫三元)
不同源则跨域,例如http://www.example.com/
因为浏览器的同源策略导致了跨域。
同源策略限制内容有:
- Cookie、LocalStorage、IndexedDB 等存储性内容
- DOM 节点 ,AJAX 请求不能发送
但是有三个标签是允许跨域加载资源:
1.<img src=XXX>
2.<link href=XXX>
3.<script src=XXX>
- ajax请求时,浏览器要求当前网页和server必须同源(安全)
- 同源:协议/域名/端口,三者必须一致
- 前端:http://a.com:8080/; server: https://b.com/api/xxx (默认端口80)
三者都不同源
跨域:
- 所有的跨域,都必须经过server端允许和配合
- 未经server端允许就实现跨域,说明浏览器有漏洞,危险信号
Jsonp
JSONP
- 访问https://immoc.com/,服务端一定返回一个html文件吗?
- 服务器可以任意动态拼接数据返回,只要符合html格式要求
- 同理与
<script src=https://imooc.com/getData.js>
JSONP基本实现原理
- script可绕过跨域限制
- 服务器可以任意动态拼接数据返回
- 所以script就可以获得跨域的数据,只要服务端愿意返回
核心代码演