什么是跨域资源访问

本系列文章的思想，都融入了 让 Java 再次伟大 这个全新设计的脚手架产品中，欢迎大家使用。

什么是跨域资源访问

当一个资源请求一个其它域名或者另外一个端口的资源时会产生一个跨域 HTTP 请求(cross-origin HTTP request)。比如说，http://domaina.example 的某 HTML 页面通过 img 的 src 请求 http://domainb.foo/image.jpg

在当今的Web 开发中，许多页面都会从另外一个站点加载各类资源（包括 CSS、图片、JavaScript 脚本以及其它类资源）。而针对这些同来源的各类资源的交互，各大浏览器往往遵循「同源策略」对交互进行处理。

什么是同源访问策略

同源策略限制从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。如果协议、端口（如果指定了一个）和主机对于两个页面是相同的，则两个页面具有相同的源。
下表给出了相对 http://store.company.com/dir/page.html 同源检测的示例:

URL	结果	原因
http://store.company.com/dir2/other.html	成功	dir2/other.html
http://store.company.com/dir/inner/another.html	成功	dir/inner/another.html
https://store.company.com/secure.html	失败	不同的协议 ( https )
http://store.company.com:81/dir/etc.html	失败	不同的端口 ( 81 )
http://news.company.com/dir/other.html	失败	不同的主机（主机）

同源策略的交互定义

同源策略控制了不同源之间的交互，例如在使用 XMLHttpRequest 或 img 标签时则会受到同源策略的约束。交互通常分为三类：

• 通常允许进行跨域写操作（Cross-origin writes）。例如链接（links），重定向以及表单提交已经发送 ajax 请求。（特定少数的 HTTP 请求需要添加 preflight）
• 通常允许跨域资源嵌入（Cross-origin embedding）。之后下面会举例说明。
• 通常不允许跨域读操作（Cross-origin reads）。但常可以通过内嵌资源来巧妙的进行读取访问。例如可以读取嵌入图片的高度和宽度，调用内嵌脚本的方法。

常见跨域资源嵌入示例

• <script src="..."></script>标签嵌入跨域脚本。语法错误信息只能在同源脚本中捕捉到。
• <img>嵌入图片。支持的图片格式包括 PNG,JPEG,GIF,BMP,SVG,…
• <video> 和 <audio>嵌入多媒体资源。

可见，在通常情况下使用 XMLHttpRequest 的跨域读取操作将会受到限制，而<img>的资源嵌入操作则可以执行。不过，若当前环境希望用户能够自由请求服务器，不受同源策略限制应该怎么办？这样的问题，就需要引入 CORS。

什么是 CORS

CORS 是一种跨域资源共享（Cross-origin resource sharing）的解决方案。它定义了一种浏览器和服务器交互的方式来确定是否允许跨域请求。这比起简单地允许所有这些的要求来说更加安全。

简言之，CORS 就是为了让 AJAX 可以实现可控的跨域访问而生的。通常我们采用配置 http response header 的方式就可以启用 CROS Access–Control-Allow-Origin: *

这也就是说 CORS 的配置一定是定义在服务器的——即只有服务器自己能决定来自其他源 (origin) 的请求是否有资格从我这里获取信息。

启用 CORS 带来的安全隐患

1. 即便服务器只允许来自某个信任网站的请求，但是它也会收到大量来自其他域的跨域请求。这些请求有时可能会被用于执行应用层面的 DDOS 攻击。
2. 假定一个服务器开启了 CORS，如果内部网络的用户访问了恶意网站，恶意网站可以通过 CORS（跨域请求）来获取到内部站点的内容。

总结

属于不同源的资源之间互相请求时会产生「跨域访问」的问题。各大浏览器通常基于「同源策略」对跨域访问进行处理。而 CORS 则提供了跨域资源共享的解决方案，使的同源策略能够通过 CORS 变得更加的灵活，以满足不同场景的需要。