同源策略&跨域

了解同源策略&跨域

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 代码 请求到本地，并执行

总结：