softmixx background

Javascript fetch URL

Webserver, Javascript, DaVinci Webtools

'Access-Control-Allow-Origin' Fehler im Browser

[ 15.11.2021 | Alex]
Folgende Fehlermeldung bei Abruf einer URL mit fetch in einem JavaScript kommt euch bekannt vor?

Access to fetch at 'https://domain2.de' from origin 'https://domain1.de' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Nun ihr versucht (wie ich) in einem Script, das von der Domain domain1.de (Origin) im Browser abgerufen wurde, eine URL von domain2.de aufzurufen. Das verweigert der Browser mit Hinweis auf die CORS policy. Abhilfe schafft die Ergänzung des HTTP  Response Headers bei domain2.de. In PHP sieht das dann so aus:

header('Access-Control-Allow-Origin: *');

Und wenn ihr ebenso wie in den DaVinci Web Tools (DWT) noch individuelle Request Header Einträge habt, werdet ihr auf die folgende Fehlermeldung zulaufen:

Access to fetch at 'https://domain2.de' from origin 'https://domain1.de' has been blocked by CORS policy: Request header field x-dwt-sig is not allowed by Access-Control-Allow-Headers in preflight response.

Es ist also noch eine zusätzliche HTTP Response Header Ergänzung nötig, die alle zulässigen Request Header Parameter definiert. Da wir in den DWT's jedem internen API Request die Parameter 'X-DWT-UID, X-DWT-SIG, X-DWT-TOKEN'  mitgeben, ergibt sich noch folgende Zeile in dem PHP Script von domain2.de:

header('Access-Control-Allow-Headers: Origin, Content-Type, X-DWT-UID, X-DWT-SIG, X-DWT-TOKEN');