说说浏览器的同源策略

同源策略（Same origin policy）使得来自于不同来源的脚本，无法读取或修改当前源对象。它是浏览器最核心也是最基本的安全功能。

1 同源判断规则

如果域名或 IP 地址、端口与协议都相同，那么就会被判定为同源。

假设有这么一个 URL：http://www.deniro.net，下表中的 URL 与此比较，判断是否同源：

URL	是否同源	原因
http://www.deniro.net/welcome.html	同源	-
https://www.deniro.net/welcome.html	不同源	协议不同
http://www.deniro.net:8080/welcome.html	不同源	端口号不同
http://book.deniro.net/welcome.html	不同源	域名不同

2 跨域加载资源

<script>、<img>、<iframe>、<link> 标签不受同源策略限制，可以跨域加载资源。 比如我们可以在我们的项目中加载 CDN 上的 Vue.js： <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>

CDN 的全称是 Content Delivery Network ，即 内容分发网络 。CDN 是构建在网络之上的内容分发网络，依靠部署在各地的边缘服务器，通过中心平台的负载均衡 、 内容分发 、 调度等功能模块，使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率 。

这些标签加载资源时，浏览器会发起 Get 请求，获取这些资源。但在加载 JavaScript 时，限制了读写返回内容的权限。

3 XMLHttpRequest 对象

XMLHttpRequest 对象可以与服务器交换数据。具体功能如下：

• 在不重新加载页面的情况下更新网页。
• 在页面已加载后从服务器请求数据。
• 在页面已加载后从服务器接收数据。
• 在后台向服务器发送数据。

为了安全起见，XMLHttpRequest 对象，在默认情况下，不能跨域访问资源，所以在 Ajax 开发中一定要注意哦O(∩_∩)O~

4 XMLHttpRequest 跨域访问标准

浏览器会通过目标域所返回的 HTTP 头（Access-Control-Allow-Origin）来判定是否允许跨域访问，因为 JavaScript 无法操纵 HTTP 头。

转载于:https://juejin.im/post/5c8481d45188257ec827fc50