cors - 缓存选项 - 预检请求

Question

我有一个有角度的应用程序，可以访问 azure 函数后端。我想缓存 cors OPTIONS 请求以提高性能。经过多次尝试和失败后，我使用普通的角度应用程序和天蓝色功能编写了一个快速示例，在那里我尝试了与我在现实世界应用程序中尝试过(但失败)的相同方法，这次成功了。因此，以下是两个选项请求。我想知道为什么一个会被浏览器缓存而另一个不会。

这不会被缓存

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

这里，在第一个示例中，前端会询问是否允许“授权” header ，我们会使用通配符进行响应，如下所示:access-control-allow-headers: *。根据 https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Headers#directives 出现此问题 问题是“授权” header 不能使用通配符，并且必须始终在响应 header 中指定。