OPTIONS 请求过多

Question

在我的应用程序中，前端（使用 axios 的 ReactJS，如果重要的话）对后端进行一些 API 调用（Node/Express，如果重要的话）。在所有响应中，服务器确实以 Access-Control-Allow-Origin:* 响应（这是一个测试环境，将进行适当的更改以允许生产中的特定来源）。

在 Chrome Developer Tools Network 选项卡中，我观察到对于每个请求 POST /assets 、 POST /filters、PUT /media 等，都会发送预检 OPTIONS 请求.现在我明白了 from here 的原因，这很好。

选项请求Headers

OPTIONS /api/v1/content/bb54fbf52909f78e015f/f91659797e93cba7ae9b/asset/all 
HTTP/1.1
Host: XX.X.XX.XXX:5000
Connection: keep-alive
Access-Control-Request-Method: POST
Origin: http://localhost:3000
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_5) AppleWebKit/537.36     (KHTML, like Gecko) Chrome/59.0.3071.115 Safari/537.36    
Access-Control-Request-Headers: authorization,content-type
Accept: */*
DNT: 1
Referer: http://localhost:3000/main/93f1ced0f15f35024402/assets
Accept-Encoding: gzip, deflate
Accept-Language: en,en-US;q=0.8,mr;q=0.6

回复Headers

HTTP/1.1 204 No Content
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET,HEAD,PUT,PATCH,POST,DELETE
Vary: Access-Control-Request-Headers
Access-Control-Allow-Headers: authorization,content-type
Date: Sat, 05 Aug 2017 10:09:16 GMT
Connection: keep-alive

我的观察是，这实际上是为每个请求发送的，并且是重复发送的，即即使再次发出相同的请求（立即或以其他方式）。

我的问题是

这一定是件坏事吗（即它会导致任何性能问题，甚至是轻微的问题）吗？
为什么浏览器不记得同一服务器、同一请求的 header 响应？
我是否缺少在前端或后端配置以使其具有粘性的内容？

Answer 1

您需要发送 Access-Control-Max-Age header 来告诉浏览器可以将您的其他 Access-Control-* header 缓存那么多秒：

Access-Control-Max-Age: 600

OPTIONS 请求过多

Too many OPTIONS requests

cors

express

preflight

reactjs

axios