跨资源共享CORS

名词解释

• Origin：同源策略指的是具有相同协议/域以及端口的资源；
• CORS：跨资源共享，Cross-Origin Resource Sharing；

跨域请求方案

• CORS：官方推荐的方案；
• HTML5 API：postMessage；
• Web Socket：完全抛弃HTTP协议；
• JSONP：不推荐使用；

CORS

跨资源共享允许Web服务器进行跨源访问控制，以保障跨源数据的安全。

使用CORS的场景

• 使用XHR或者FetchAPI发起的HTTP请求；
• Web字体，调用@font-face字体使用到外部字体资源；
• 使用drawImage将Image/Video画面绘制到canvas；
• WebGL贴图；

CORS预检请求

• 预检目的：避免跨域请求对服务器用户数据产生预料之外的影响；
• 实现方法：向服务器发送OPTIONS请求；

HTTP请求头部字段

• Origin：预检请求或者实际请求的源站；
• Access-Control-Request-Method：预检请求中将实际请求的方法告诉服务器；
• Access-Control-Request-Headers：预检请求中将实际请求的头部告诉服务器；

OPTIONS /resources/post-here/ HTTP/1.1
Host: bar.other
User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1b3pre) Gecko/20081130 Minefield/3.1b3pre
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-us,en;q=0.5
Accept-Encoding: gzip,deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Connection: keep-alive
Origin: http://foo.example
Access-Control-Request-Method: POST
Access-Control-Request-Headers: X-PINGOTHER, Content-Type

HTTP响应的头部

• Access-Control-Allow-Origin：允许的源，不管预检请求还是实际请求都需要此字段；
• Access-Control-Allow-Methods：允许的方法；
• Access-Control-Allow-Headers：允许的头部；
• Access-Control-Expose-Headers：服务器把允许浏览器访问的头放入白名单；
• Access-Control-Max-Age：该响应的有效时间，在该时间内无需再发预检请求；

HTTP/1.1 200 OK
Date: Mon, 01 Dec 2008 01:15:39 GMT
Server: Apache/2.0.61 (Unix)
Access-Control-Allow-Origin: http://foo.example
Access-Control-Allow-Methods: POST, GET, OPTIONS
Access-Control-Allow-Headers: X-PINGOTHER, Content-Type
Access-Control-Max-Age: 86400
Vary: Accept-Encoding, Origin
Content-Encoding: gzip
Content-Length: 0
Keep-Alive: timeout=2, max=100
Connection: Keep-Alive
Content-Type: text/plain

简单请求

不需要发起预检的请求被称为简单请求。

简单请求必需满足下面所有条件

• 请求方法必需三者之一：GET, POST, HEAD；
• Content-Type必需是三者一直：text/plain, multipart/form-data, application/x-www-form-urlencoded；
• 头部相关：Accept, Accept-Language, Content-Type等；
• 文件相关：XMLHttpRequestUpload对象不能注册监听器以及没有ReadableStream对象；