Warum Ihr API-Aufruf zweimal getroffen wird: Verständnis von Preflight und XHR

Wenn ich den Netzwerk-Tab in DevTools inspiziere, fällt mir oft auf, dass doppelte API-Aufrufe mit verschiedenen Anfragearten, insbesondere Preflight- und XHR-Anfragen, auftreten. Dieses Phänomen ist normalerweise mit CORS (Cross-Origin Resource Sharing) verbunden. XMLHttpRequest (XHR) ist der tatsächliche API-Aufruf, der Datenanforderungen vom Client an den Server sendet. Eine Preflight-Anfrage ist eine kleine Anfrage, die vom Browser gesendet wird, um zu überprüfen, ob die API eine Anfrage von der aktuellen Herkunft akzeptiert. Diese Anfrage ist normalerweise eine OPTIONS-Anfrage, die um Erlaubnis bittet, fortzufahren. Wenn der Server mit den entsprechenden Access-Control-Allow-*-Headern antwortet, sendet der Browser den tatsächlichen XHR-Aufruf. Der Browser überprüft zunächst, ob ein Preflight erforderlich ist, sendet dann die OPTIONS-Anfrage, wenn erforderlich, und sendet schließlich den XHR-Aufruf, wenn die Erlaubnis erteilt wird. Wenn der Server die Erlaubnis verweigert, wird der XHR-Aufruf blockiert. Das Verständnis von Preflight-Anfragen ist für QAs wichtig, um zu wissen, dass doppelte API-Aufrufe kein Fehler sind, sondern vielmehr ein Sicherheitsfeature. Es hilft QAs auch, CORS-Berechtigungen zu testen und Server-Antworten mit Headern wie Access-Control-Allow-Origin zu überprüfen.