I have an angular app that hits an azure functions backend. I want to cache cors OPTIONS requests to improve performance. After trying and failing several times I coded a quick example with a vanilla angular app and azure functions, there I tried the same approach I've tried (and failed) in the real world application, and this time succeeded. So, the following are both options requests. I want to know why one gets cached by the browser and the other does not.
This doesn't get cached
Request URL: https://foo.azurewebsites.net/api/GetFooHttpTrigger
Request Method: OPTIONS
Status Code: 200 OK
Remote Address: 20.50.2.47:443
Referrer Policy: strict-origin-when-cross-origin
Access-Control-Allow-Headers: *
Access-Control-Allow-Methods: GET,POST
Access-Control-Allow-Origin: *
Access-Control-Max-Age: 86400
Content-Length: 0
Date: Wed, 21 Dec 2022 14:31:32 GMT
Accept: */*
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9
Access-Control-Request-Headers: authorization,content-type,x-apptimezone,x-customheader-ui,x-customheader-debug
Access-Control-Request-Method: POST
Connection: keep-alive
Host: foo.portal.dev.rel150.cloud.techie
Origin: https://foo.portal.dev.rel150.cloud.techie
Referer: https://foo.portal.dev.rel150.cloud.techie/
Sec-Fetch-Dest: empty
Sec-Fetch-Mode: cors
Sec-Fetch-Site: cross-site
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/108.0.0.0 Safari/537.36 Edg/108.0.1462.54
This gets cached
Request URL: http://localhost:7071/api/todo
Request Method: OPTIONS
Status Code: 200 OK
Remote Address: 127.0.0.1:7071
Referrer Policy: strict-origin-when-cross-origin
Access-Control-Allow-Headers: *
Access-Control-Allow-Methods: post, get, delete, patch
Access-Control-Allow-Origin: *
Access-Control-Max-Age: 3600
Content-Length: 0
Date: Wed, 21 Dec 2022 15:17:33 GMT
Server: Kestrel
Accept: */*
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9
Access-Control-Request-Headers: content-type,customheader1
Access-Control-Request-Method: POST
Connection: keep-alive
Host: localhost:7071
Origin: http://localhost:4200
Referer: http://localhost:4200/
Sec-Fetch-Dest: empty
Sec-Fetch-Mode: cors
Sec-Fetch-Site: same-site
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/108.0.0.0 Safari/537.36
Here the thing, in the first example front end is among other things asking if 'authorization' header is allowed an we're responding with a wildcard like so: access-control-allow-headers: *. Problem with this according to https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Headers#directives is that 'authorization' header cannot be wildcarded and must always be specified in the response headers.