Spring Boot+Spring Cloud+Vue+Element项目实战:手把手教你开发权限管理系统
上QQ阅读APP看书,第一时间看更新

9.2 CORS 技术

为了解决浏览器跨域问题,W3C提出了跨源资源共享方案,即CORS(Cross-Origin Resource Sharing)。

CORS可以在不破坏即有规则的情况下,通过后端服务器实现CORS接口,从而实现跨域通信。CORS将请求分为两类:简单请求和非简单请求,分别对跨域通信提供了支持。

9.2.1 简单请求

在CORS出现前,发送HTTP请求时在头信息中不能包含任何自定义字段,且HTTP信息不超过以下几个字段:

  • Accept
  • Accept-Language
  • Content-Language
  • Last-Event-ID
  • Content-Type(仅限于[application/x-www-form-urlencoded、multipart/form-data、text/plain]类型)

一个简单请求的例子:

对于简单请求,CORS的策略是请求时在请求头中增加一个Origin字段,服务器收到请求后,根据该字段判断是否允许该请求访问。

  • 如果允许,就在HTTP头信息中添加Access-Control-Allow-Origin字段,并返回正确的结果。
  • 如果不允许,就不在HTTP头信息中添加Access-Control-Allow-Origin字段。

除了上面提到的Access-Control-Allow-Origin,还有几个字段用于描述CORS返回结果:

  • Access-Control-Allow-Credentials:可选,用户是否可以发送、处理cookie。
  • Access-Control-Expose-Headers:可选,可以让用户拿到的字段。有几个字段无论设置与否都可以拿到的,包括Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma。

9.2.2 非简单请求

对于非简单请求的跨源请求,浏览器会在真实请求发出前增加一次OPTION请求,称为预检请求(preflight request)。预检请求将真实请求的信息,包括请求方法、自定义头字段、源信息添加到HTTP头信息字段中,询问服务器是否允许这样的操作。

例如一个GET请求:

与CORS相关的字段有:

  • 请求使用的HTTP方法Access-Control-Request-Method。
  • 请求中包含的自定义头字段Access-Control-Request-Headers。

服务器收到请求时,需要分别对Origin、Access-Control-Request-Method、Access-Control-Request-Headers进行验证,验证通过后,会在返回HTTP头信息中添加:

它们的含义分别是:

  • Access-Control-Allow-Methods:真实请求允许的方法。
  • Access-Control-Allow-Headers:服务器允许使用的字段。
  • Access-Control-Allow-Credentials:是否允许用户发送、处理cookie。
  • Access-Control-Max-Age:预检请求的有效期,单位为秒。有效期内,不会重复发送预检请求。

当预检请求通过后,浏览器才会发送真实请求到服务器。这样就实现了跨域资源的请求访问。