Question

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

在Chrome开发者工具网络标签中，我发现，对于每个请求POST /assets，POST /filters，PUT /media等，都会发送预检的OPTIONS请求。现在我明白了from here，原因就是这些，那很好。

选项请求标题

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

响应标题

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

我的观察是，这是按字面意思发送的每一个请求，并且重复地即即使再次（立即或以其他方式）再次发出相同的请求。

我的问题是

这是不是一件坏事（即它会导致任何性能问题，甚至是轻微的）？
为什么浏览器不会记住同一服务器的标头响应，同样的请求？
是否有任何我在前端或后端配置不足以使其变粘？

Answer 1

You need to send the Access-Control-Max-Age header to tell the browser that it’s OK to cache your other Access-Control-* headers for that many seconds:

Access-Control-Max-Age: 600

OPTIONS请求太多

1 个答案: