http学习（四）CORS跨域资源共享

CORS：Cross-Origin Resource Sharing，跨域资源共享

它是一种机制，这个机制使用一个额外的HTTP响应头来赋予当前user-agent（浏览器）获得在当前源（origin）下使用非同源资源的权限。

1、被浏览器限制的同源资源

出于安全的原因，浏览器限制从脚本内发起跨源的HTTP请求，也就意味着限定了当前web应用程序只能请求与当前同域（同源）的HTTP资源，除非使用CORS头信息。——原来被浏览器限制了。那么那些请求会被限制呢？

1 以跨站点的方式调用XMLHttpRequest或者Fetch API。
2 Web字体（用于CSS中@ font-face的跨域字体使用）
3 WebGL textures(纹理)
4 使用drawImage绘制到canvas的图像/视频帧。
5 样式表（用于CSSOM访问）

案例参考：https://www.cnblogs.com/demingblog/p/8393511.html

由于XMLHttpRequest是被浏览器限制的同源访问资源，而ajax方法就是基于XMLHttpRequest来实现的，所以在没有使用CORS头信息的的情况，跨源的getCrossRescource()方法自然会无法顺利执行。而上文所提到的index.html里跨源的a.jpg、a.css不属于拦截目标，所以能正常显示和渲染。

2、同源

如果两个 URL 的 protocol、port (en-US) (如果指定了端口)和 host 都相同的话，则这两个 URL 是同源。
这个方案也被称为“协议/主机/端口元组”，或者直接是 “元组”。

举个例子

我们访问的是 http://www.myapp.com/index.html 页面，那么当前的origin就是 http://www.myapp.com。
而这个页面中的脚本请求的资源是 http://www.other.com/goods.json ，这是个非同源请求，且属于浏览器拦截名单里边的请求形式。
所以我们需要通过设置CROS头信息来完成跨域调用。

到底啥是“在服务器上”添加头？

IE 中的特例
Internet Explorer 的同源策略有两个主要的差异点：

授信范围（Trust Zones）：两个相互之间高度互信的域名，如公司域名（corporate domains），则不受同源策略限制。
端口：IE 未将端口号纳入到同源策略的检查中，因此 https://company.com:81/index.html 和 https://company.com/index.html 属于同源并且不受任何限制。
这些差异点是不规范的，其它浏览器也未做出支持，但会助于开发基于window RT IE的应用程序。

参考:
https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CORS【很专业的一个网站】
https://www.cnblogs.com/demingblog/p/8393511.html