同源策略（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 头。
网友评论