了解同源策略&跨域
1.什么是同源
同源指的是两个 URL 地址具有
相同的协议
、
主机名
、
端口号
。
例如,下表给出了相对于
http://www.test.com/index.html
页面的 5 个
同源检测
结果:
2.什么是同源策略
同源策略
(英文全称 Same origin policy)是
浏览器
提供的一个
安全功能
。
浏览器
的
同源策略
规定:不允许
非同源的
URL 之间进行
资源的交互
。
3.什么是跨域
同源
指的是两个 URL 的
协议
、
主机名
、
端口号
完全一致,反之,则是
跨域
。
出现跨域的根本原因:
浏览器的同源策略
不允许非同源的 URL 之间进行资源的交互。例如:
⚫
网页:http://
www.test.com
/index.html
⚫
接口:http://
www.api.com
/userlist
⚫
受到同源策略的限制,
上面的网页
请求
下面的接口
会失败
4.浏览器对跨域请求的拦截过程(特别重要)
浏览器允许发起跨域请求。但跨域请求回来的数据,会被浏览器拦截,无法被页面获取到!
示意图如下:
5.突破浏览器跨域限制的两种方案
JSONP
和
CORS
是实现
跨域数据请求
的两种技术方案。
注意:目前 JSONP 在实际开发中很少会用到,CORS 是跨域的主流技术解决方案。
CORS
1..CORS 的概念
CORS
是
解决跨域数据请求
的
终极
解决方案,全称是
C
ross-
o
rigin
r
esource
s
haring。
CORS 技术需要
浏览器
和
服务器
同时支持,二者缺一不可:
① 浏览器要
支持
CORS 功能(主流的浏览器全部支持,IE 不能低于 IE10)
② 服务器要
开启
CORS 功能(需要
后端开发者
为接口开启 CORS 功能)
请大家思考:实现 CORS 的关键,是在
客户端
还是在
服务器端
?
答案:
服务器端
。
原因:如果服务器端没有开启 CORS 功能,则客户端无法访问那些跨域的接口!
2.CORS 的原理
服务器端通过
Access-Control-Allow-Origin
响应头,来告诉浏览器
当前的 API 接口
是否允许跨域请求。
3.CORS 的两个主要优势
① CORS 是
真正的 Ajax 请求
,支持 GET、POST、DELETE、PUT、PATCH 等这些常见的 Ajax 请求方式
② 只需要后端开启 CORS 功能即可,前端的代码无须做任何改动
注意:我们之前做过的案例中,所有调用的接口
均已在服务器端开启了 CORS 功能
!
例如:聊天机器人案例、新闻列表案例、用户登录案例
JSONP
1.什么是 JSONP
JSONP
是
实现跨域数据请求
的一种技术解决方案。它
只支持 GET 请求
,不支持 POST、DELETE 等其它请求。
⚫
在实际开发中很少被使用
⚫
在面试中可能会问到 JSONP 的原理
2.JSONP 不是真正的 Ajax 技术
在解决跨域问题时:
⚫
CORS
方案
用到了
XMLHttpRequest 对象,发起的是纯正的 Ajax 请求
⚫
JSONP
方案
没有用到
XMLHttpRequest 对象,因此,
JSONP 不是真正的 Ajax 技术
结论:只要用到了 XMLHttpRequest 对象,发起的就是 Ajax 请求!
3.JSONP 的底层实现原理(重要-面试会问)
JSONP 在底层,用到了
<script>
标签的
src
属性!
原因:
⚫
<script> 标签的 src 属性,
不受
浏览器
同源策略的限制
⚫
可以把
非同源的 JavaScript 代码
请求到本地,并执行