CORS(跨域资源共享-跨域访问)

2018-07-11 本文已影响0人公子拙

概述

出于安全原因，浏览器允许通过标签进行跨域访问(如img标签的src属性)，但
限制从脚本内发起的跨源访问(如Ajax)。

为了统一解决浏览器中脚本内跨域请求问题(如Ajax)，W3C于2014年发布CORS(Cross-Origin Resource Sharing，跨域资源共享）标准。

此方案需要浏览器和服务端同时支持。

目前所有现代浏览器都支持此标准。

原理

W3C新增以下HTTP头字段，让服务端声明哪些网站有哪些权限访问服务端哪些资源。

请求头:

Origin（必选）
参数的值为请求跨域资源的 URI。不包含任何路径信息，只是服务器名称，一般格式为:scheme://host [:port],如http://192.168.1.100:80
Access-Control-Request-Method
用于预检请求。其作用是，将实际请求所使用的 HTTP 方法告诉服务器。
Access-Control-Request-Headers
用于预检请求。其作用是，将实际请求所携带的头字段告诉服务器。
逗号分割。

应答头:

Access-Control-Allow-Origin:<origin> | *
指定允许访问该资源的外域 URI。

<origin>=仅允许此源进行访问,可以暴露身份凭证
* =允许任意URI访问，但不允许暴露身份凭证

Access-Control-Allow-Credentials:true
指定了当浏览器的credentials设置为true时是否允许浏览器读取response的内容。如果不允许，则不添加此字段。
Access-Control-Expose-Headers
允许暴露的应答头，用逗号分割。未暴露的头，不允许脚本访问。
Access-Control-Max-Age:单位s
用于预检请求的响应。指定了预检(preflight)请求的结果能够被使用多久。
Access-Control-Allow-Methods
用于预检请求的响应。其指明了实际请求所允许使用的 HTTP 方法。
逗号分割。
Access-Control-Allow-Headers
用于预检请求的响应。其指明了实际请求中允许携带的头字段。
逗号分割。

两类请求

另规定浏览器把跨域请求分为两类且对应不同的处理方式:

简单请求（simple request）

请求方法为HEAD/GET/POST且请求头仅为下面几种:

    Accept
    Accept-Language
    Content-Language
    Content-Type:仅能是下面三种之一
        application/x-www-form-urlencoded
        multipart/form-data
        text/plain
    DPR:任意
    Downlink:任意
    Save-Data:任意
    Viewport-Width:任意
    Width:任意

非简单请求（not-so-simple request）

对于非简单请求浏览器必须首先使用 OPTIONS 方法发起一个预检请求（preflight request），从而获知服务端是否允许该跨域请求。
服务器确认允许之后，才发起实际的 HTTP 请求。

Ajax跨域处理步骤

简单请求

客户端:
如果需要发送cookie和认证信息，则设置XMLHttpRequest对象的withCredentials属性为true，如:

var xhr = new XMLHttpRequest();
xhr.withCredentials = true;

服务端:

设置下面对应应答头即可。

(必选)Access-Control-Allow-Origin应答头为请求源或*(但如果需要返回cookie和认证信息，则不能设置为*)
(可选) Access-Control-Allow-Credentials设置为true，用于暴露cookie和认证信息。
(可选) Access-Control-Expose-Headers设置为需要暴露的应答头。

非简单请求

由浏览器判断一个请求是简单请求还是非简单请求。即客户端Ajax不需要做什么处理。