同源策略&跨域

了解同源策略&跨域

1.什么是同源
同源指的是两个 URL 地址具有 相同的协议 主机名 端口号
例如,下表给出了相对于 http://www.test.com/index.html 页面的 5 个 同源检测 结果:
同源策略&跨域_第1张图片
2.什么是同源策略
同源策略 (英文全称 Same origin policy)是 浏览器 提供的一个 安全功能
浏览器 同源策略 规定:不允许 非同源的 URL 之间进行 资源的交互
3.什么是跨域
同源 指的是两个 URL 的 协议 主机名 端口号 完全一致,反之,则是 跨域
出现跨域的根本原因: 浏览器的同源策略 不允许非同源的 URL 之间进行资源的交互。例如:
网页:http:// www.test.com /index.html
接口:http:// www.api.com /userlist
受到同源策略的限制, 上面的网页 请求 下面的接口 会失败

4.浏览器对跨域请求的拦截过程(特别重要)

浏览器允许发起跨域请求。但跨域请求回来的数据,会被浏览器拦截,无法被页面获取到! 示意图如下:
同源策略&跨域_第2张图片

 5.突破浏览器跨域限制的两种方案

JSONP CORS 是实现 跨域数据请求 的两种技术方案。
同源策略&跨域_第3张图片

注意:目前 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 接口 是否允许跨域请求。
同源策略&跨域_第4张图片

 

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 在底层,用到了

你可能感兴趣的:(前端,ajax)