缓存选项-飞行前请求

Question

我有一个angular应用程序，它击中了azure函数后端。我想缓存cors OPTIONS请求以提高性能。在尝试和失败了几次之后，我用一个普通的angular应用程序和azure函数编写了一个快速的例子，在那里我尝试了我在现实世界应用程序中尝试过(失败了)的相同方法，这次成功了。因此，以下是两个选项请求。我想知道为什么一个被浏览器缓存，而另一个没有。

这个不会被缓存

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

这个被缓存

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

Answer 1

这里的事情，在第一个例子中，前端在其他事情中询问'authorization'头是否被允许，我们用一个通配符响应:access-control-allow-headers: *。这个问题根据https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Headers#directives是'authorization'头不能通配符，必须始终在响应头中指定。