时间戳

首页 > 解决方案 > Access-Control-Max-Age 不适用于授权标头

http - Access-Control-Max-Age 不适用于授权标头

问题描述

试图锻炼为什么 chrome 仍然触发预取请求，即使Access-Control-Max-Age在与标头结合时已指定Authorization。如果我删除Authorization标头预检缓存按预期工作。

请求标头

:method: OPTIONS
:path: /v1/api
:scheme: https
accept: */*
accept-encoding: gzip, deflate, br
accept-language: en-GB,en-US;q=0.9,en;q=0.8,pt-BR;q=0.7,pt;q=0.6,fr;q=0.5
access-control-request-headers: authorization,content-type
access-control-request-method: POST
origin: https://null.jsbin.com
referer: https://null.jsbin.com/
sec-fetch-dest: empty
sec-fetch-mode: cors
sec-fetch-site: cross-site

响应标头

access-control-allow-credentials: true
access-control-allow-headers: *
access-control-allow-methods: OPTIONS,POST
access-control-allow-origin: *
access-control-max-age: 86400
content-length: 0
content-type: application/json
date: Wed, 04 Aug 2021 08:30:50 GMT

我正在慢慢研究这个文档https://fetch.spec.whatwg.org/#http-cors-protocol但看不出有任何理由Authorization阻止预检缓存。

另外，顺便说一句。如果Authorization不兼容，Access-Control-Max-Age从安全的角度来看，将身份验证令牌包含在正文中而不是作为标头是一个坏主意吗？您可以假设，通过 TLS。

标签： httpcorshttp-headers

解决方案

由于我不完全清楚的原因，指定Access-Control-Allow-Headers: Authorization, *“修复”事物并且Access-Control-Max-Age: 10受到尊重。授权标头是一种边缘情况，必须由服务器 [0] [1] [2]明确列出

const buildHeaders = origin => {
  return {
    "Access-Control-Allow-Methods": "*",
    // the key line 
    "Access-Control-Allow-Headers": "Authorization, *", 
    "Access-Control-Allow-Origin": "*",
    "Access-Control-Max-Age": "10"
  };
};

fastify.options("/", function(request, reply) {
  reply
    .code(200)
    .headers(buildHeaders(request.headers.origin))
    .send();
});

fastify.post("/", function(request, reply) {
  reply
    .code(200)
    .headers(buildHeaders(request.headers.origin))
    .header("Content-Type", "application/json; charset=utf-8")
    .send({ hello: "world" });
});


const url = 'https://dynamic-past-deltadromeus.glitch.me/'
const opts = {
    headers: {
        'Content-Type': 'application/json', 
        'Authorization': 'asdf'
    },
    method: 'POST',
    body: JSON.stringify({ message: 'ping' }),
}
fetch(url,opts)

源代码：

推荐阅读