Zu viele OPTIONS-Anfragen

Question

In meiner Anwendung führt das Frontend (ReactJS unter Verwendung von Axios, falls das wichtig ist) einige API-Aufrufe an das Backend aus (Node/Express, falls das wichtig ist). In allen Antworten reagiert der Server mit Access-Control-Allow-Origin:* (Dies ist eine Testumgebung, entsprechende Änderungen werden vorgenommen, um bestimmte Ursprünge in der Produktion zuzulassen).

im Entwickler-Tools Netzwerk-Registerkarte Chrome beobachte ich für jede Anforderung, dass POST /assets sagen, POST /filters, PUT /media usw., eine Anfrage Preflight OPTIONS gesendet wird. Jetzt verstehe ich from here, der Grund für diese und das ist in Ordnung.

OPTIONS-Request-Header

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 

Antwortheader

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 

Meine Beobachtung ist, dass diese alle Anforderungen für buchstäblich gesendet wird, und wiederholt das heißt, selbst wenn die gleiche Anforderung gestellt wird wieder (sofort oder nicht).

Meine Fragen sind

1. Ist dies unbedingt eine schlechte Sache (das heißt würde es keine Performance-Probleme verursachen, auch kleinere)?

2. Warum erinnert sich der Browser nicht an die Headerantworten für denselben Server, dieselbe Anfrage?

3. Gibt es irgendetwas, das ich am Frontend oder Backend konfigurieren muss, um dieses Sticky zu erstellen?

Answer 1

Sie müssen den Access-Control-Max-Age Header senden, um den Browser zu sagen, dass es OK ist Ihre anderen Access-Control-* Header für so viele Sekunden zwischenzuspeichern:

Access-Control-Max-Age: 600