跨域安全的请求头和响应头[B君笔记][博客]

noscript{position: fixed}跨域安全的请求头和响应头跨域创建时间：2021-12-15 17:40:00

跨域安全请求头

一个 CORS 安全列表请求标头是以下HTTP 标头之一：

Accept
Accept-Language
Content-Language
Content-Type

当只包含这些标头（以及满足下面列出的附加要求的值）时，请求不需要在CORS的上下文中发送预检请求。

您可以使用Access-Control-Allow-Headers标题安全列出更多标题，并在那里列出上述标题以规避以下附加限制：

附加限制

CORS 安全列表标头还必须满足以下要求才能成为 CORS 安全列表请求标头：

Accept-Language和Content-Language: 的值只能由0-9、A-Z、a-z、空格或*,-.;= 组成。正则为 /[0-9a-zA-Z\s*,-.;=]+/
Accept 和 Content-Type: 不能包含CORS-unsafe的请求头字节:（允许的0x00-0x1F除外0x09 (HT)）、"():<>?@[]{}、和0x7F (DEL)。正则为 /[^\x00-\x08\x10-\x1f\x7F\x2c\x20\x22\x28\x29\x3a\x3c\x3e\x3f\x40\x5b\x5d\x7b\x7d]+/
Content-Type: 需要具有其解析值（忽略参数）的 MIME 类型application/x-www-form-urlencoded，为multipart/form-data、或text/plain。
对于任何标题：值的长度不能大于 128。

实践

axios+nginx 跨域遇到的坑，中使用Content-Type: application/json跨域遇到的情况正是改标头不在跨域安全表头内。

跨域安全响应头

跨域安全响应头(CORS-safelisted)是指在跨域请求中可以暴漏个js的http标头。只有列入安全名单的响应标头可用于网页。

默认情况下，安全列表包含以下响应标头：

Cache-Control
Content-Language
Content-Length
Content-Type
Expires
Last-Modified
Pragma

注意： Content-Length不是原始安全列表响应标头集的一部分

可以使用将其他标头添加到安全列表中Access-Control-Expose-Headers。需要在服务器返回

Access-Control-Expose-Headers: X-Custom-Header, Content-Encoding

实践

在非www.cloudflare.com的页面下，打开调试面板，中输入以下代码，

let url = 'https://www.cloudflare.com/cdn-cgi/trace'
let response = await fetch(url);
response.headers.forEach(
  (value, key) => console.log(key, ':', value)
);

实际的响应标头

access-control-allow-origin: *
cache-control: no-cache
cf-ray: 6bdf08f5ab1616b7-DME
content-encoding: gzip
content-type: text/plain
date: Wed, 15 Dec 2021 10:37:09 GMT
expires: Thu, 01 Jan 1970 00:00:01 GMT
server: cloudflare
x-content-type-options: nosniff
x-frame-options: DENY

日志只输出安全标头内的内容

cache-control : no-cache
content-type : text/plain
expires : Thu, 01 Jan 1970 00:00:01 GMT

其他

也就是如果用fetch加载图片，也可以通过content-length获取图片大小