跨源资源共享(Cross-Origin Resource Sharing,CORS)

概念

跨源资源共享(Cross-Origin Resource Sharing,CORS)是一种基于 HTTP 头的机制,该机制允许服务器指示浏览器应该允许从自身以外的其他源(域、协议和端口)加载资源。

为了安全性,浏览器限制脚本内发起的跨源请求,除非服务器返回的响应中包含正确的CORS响应头。

什么时候需要CORS

  • 跨源的Ajax或Fetch Api请求
  • WebGL maps.
  • 使用 drawImage() 方法
  • CSS 中的 Shapes from images

CORS协议

CORS 协议由一组标头组成,这些标头指示响应是否可以 跨源共享。 对于涉及需要跨源的请求,将执行CORS 预检请求(CORS-preflight request ),以确保请求的当前URL支持CORS。

CORS 预检请求(CORS-preflight request

使用OPTIOS 方法并包含如下的请求头:

Access-Control-Request-Method 表示跨域请求使用的方法

Access-Control-Request-Headers 表示跨域请求额外携带的请求头

服务器响应: 服务器收到CORS 预检请求后需要反馈包含如下头部的响应

Access-Control-Allow-Origin 允许哪些源加载资源

Access-Control-Allow-Credentials 是否需要包含凭证信息

Access-Control-Allow-Methods 支持的跨源请求的方法

Access-Control-Allow-Headers 支持哪些响应请求

Access-Control-Max-Age 提供 Access-Control-Allow-Methods 和 Access-Control-Allow-Header可缓存的时间,默认 5秒

Access-Control-Expose-Headers 可暴露的响应头部 注:Access-Control-Expose-Headers 暴露的头部,可以通过js脚本获取到对应的值。否则无法通过js获取对应的header(即便在浏览器的network 中可以看到相关头部信息)

浏览器的请求流程

参考

https://fetch.spec.whatwg.org/#cors-protocol