Access-Control-Max-Age not working with Authorization header - http

Question

Trying to workout why chrome is still firing prefetch request even though the Access-Control-Max-Age has been specified when combined with the Authorization header. If I remove the Authorization header preflight caching works as expected.
Request headers
: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
Response headers
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
I'm slowly grinding through this doc https://fetch.spec.whatwg.org/#http-cors-protocol but can't see any reason why Authorization should block preflight caching.
Also, as an aside. If Authorization is incompatible with Access-Control-Max-Age is it such a bad idea to include the auth token in the body rather than as a header from a security point of view? You may assume, over TLS.
Server code: https://glitch.com/edit/#!/prairie-bright-earl?path=server.js%3A22%3A0
Client code: https://jsbin.com/dejetem/16/edit?js,console

Answer 1

For reasons that are not totally clear to me, specifying Access-Control-Allow-Headers: Authorization, * "fixes" things and the Access-Control-Max-Age: 10 is respected. The authorization header is an edge case which must be explicitly safe listed by the server
[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)
Source code:
Server source code https://glitch.com/edit/#!/dynamic-past-deltadromeus?path=server.js%3A8%3A0