Cors 跨域基本原理( 二 )


  • Access-Control-Expose-Headers: 允许浏览器可以访问哪些自定义 Header
默认情况下,浏览器只能读取最基本的响应头,Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma 。如果服务端想让浏览器获取其他 Header,就需要通过这个 Header 来指定 。这个 Header 支持逗号分隔的多值
  • Access-Control-Max-Age: 预检请求的结果在多少秒内有效
如果每次请求都需要预检,那么浏览器工作压力大,而且也浪费带宽 。所以服务端可以通过这个 Header 告诉浏览器,多长时间内免检 。
  • Access-Control-Allow-Credentials: 是否允许客户端携带验证信息
默认客户端只能携带特定的 header 发给服务端,如果服务端允许验证身份信息的 header(Cookie) 。那么通过将此 Header 置为 true 来解决此问题 。

Access-Control-Allow-Credentials: true 时,其他控制 Header 就不能是"*"了 。比如:
  1. 服务器不能将 Access-Control-Allow-Origin 的值设为通配符“_”,而应将其设置为特定的域,如:Access-Control-Allow-Origin: https://example.com 。
  2. 服务器不能将 Access-Control-Allow-Headers 的值设为通配符“_”,而应将其设置为首部名称的列表,如:Access-Control-Allow-Headers: X-PINGOTHER, Content-Type
  3. 服务器不能将 Access-Control-Allow-Methods 的值设为通配符“*”,而应将其设置为特定请求方法名称的列表,如:Access-Control-Allow-Methods: POST, GET
  • Access-Control-Allow-Methods: 表示实际请求可以是哪些请求
这个 Header 接受逗号分隔的多值
  • Access-Control-Allow-Headers: 表示实际请求可以携带的 Header
【Cors 跨域基本原理】这个 Header 接受逗号分隔的多值
"豁免"的情况不知为何,浏览器会豁免一些场景的跨域判断 。被豁免的场景称之为"简单请求",不被豁免的则称为"复杂请求" 。
符合下面条件的就是简单请求:
  1. 是 GET、HEAD、POST 之一
  2. 只有 Accept、Accept-Language、Content-Language、Content-Type 这几个 Header
  3. Content-Type 的值仅限于下列三者之一:text/plain、multipart/form-data、Application/x-www-form-urlencoded
除此之外的请求都需要经过预检判断 。
常见问题
  • 配置了跨域,浏览器仍然显示跨域错误?
首先判断是否满足跨域判断,然后检查服务端返回的
Access-Control-Allow-Origin、Access-Control-Allow-Methods 和 Access-Control-Allow-Headers 是实际发起的值是否匹配 。
  • OPTIONS 请求返回 204 还是 200?
这个问题仁者见仁,智者见智 。但目前绝大多数的配置指南都建议返回 204. 因为从语义上说 204 表示请求成功,但没有任何返回 。所以比较适合 OPTIONS 请求场景 。




推荐阅读