In der folgenden Untersuchung als API verwende ich http://example.com anstelle von http: // myApiUrl / login aus Ihrer Frage, da diese erste funktioniert.
Ich gehe davon aus, dass sich Ihre Seite unter http: //my-site.local: 8088 befindet .
Der Grund, warum Sie unterschiedliche Ergebnisse sehen, ist, dass Postbote:
- Header setzen
Host=example.com(Ihre API)
- NICHT Header setzen
Origin
Dies ähnelt der Art und Weise, wie Browser Anforderungen senden, wenn die Site und die API dieselbe Domäne haben (Browser legen auch das Header-Element fest Referer=http://my-site.local:8088, ich sehe es jedoch nicht in Postman). Wenn der OriginHeader nicht festgelegt ist, lassen Server solche Anforderungen normalerweise standardmäßig zu.
Dies ist die Standardmethode, mit der Postman Anfragen sendet. Ein Browser sendet Anforderungen jedoch anders, wenn Ihre Site und API unterschiedliche Domänen haben. Dann tritt CORS auf und der Browser automatisch:
- Setzt den Header
Host=example.com(Ihren als API)
- Setzt den Header
Origin=http://my-site.local:8088(Ihre Site)
(Der Header Refererhat den gleichen Wert wie Origin). Und jetzt sehen Sie auf der Registerkarte " Konsole und Netzwerke" von Chrome Folgendes :
Wenn Host != Origindies CORS ist und der Server eine solche Anforderung erkennt, blockiert er diese normalerweise standardmäßig .
Origin=nullwird festgelegt, wenn Sie HTML-Inhalte aus einem lokalen Verzeichnis öffnen und eine Anforderung senden. Die gleiche Situation ist, wenn Sie eine Anfrage innerhalb eines senden <iframe>, wie im folgenden Snippet (aber hier ist der HostHeader überhaupt nicht gesetzt) - im Allgemeinen können Sie dies überall dort übersetzen, wo die HTML-Spezifikation undurchsichtigen Ursprung sagt Origin=null. Weitere Informationen hierzu finden Sie hier .
fetch('http://example.com/api', {method: 'POST'});
Look on chrome-console > network tab
Wenn Sie keine einfache CORS-Anfrage verwenden, sendet der Browser normalerweise automatisch auch eine OPTIONS-Anfrage, bevor Sie die Hauptanforderung senden. Weitere Informationen finden Sie hier . Das folgende Snippet zeigt es:
fetch('http://example.com/api', {
method: 'POST',
headers: { 'Content-Type': 'application/json'}
});
Look in chrome-console -> network tab to 'api' request.
This is the OPTIONS request (the server does not allow sending a POST request)
Sie können die Konfiguration Ihres Servers ändern, um CORS-Anforderungen zuzulassen.
Hier ist eine Beispielkonfiguration, die CORS unter nginx aktiviert (Datei nginx.conf). Seien Sie sehr vorsichtig bei der Einstellung always/"$http_origin"für nginx und "*"Apache. Dadurch wird CORS von jeder Domäne entsperrt.
location ~ ^/index\.php(/|$) {
...
add_header 'Access-Control-Allow-Origin' "$http_origin" always;
add_header 'Access-Control-Allow-Credentials' 'true' always;
if ($request_method = OPTIONS) {
add_header 'Access-Control-Allow-Origin' "$http_origin"; # DO NOT remove THIS LINES (doubled with outside 'if' above)
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Max-Age' 1728000; # cache preflight value for 20 days
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'My-First-Header,My-Second-Header,Authorization,Content-Type,Accept,Origin';
add_header 'Content-Length' 0;
add_header 'Content-Type' 'text/plain charset=UTF-8';
return 204;
}
}
Hier ist eine Beispielkonfiguration, die CORS in Apache aktiviert (.htaccess-Datei)
# ------------------------------------------------------------------------------
# | Cross-domain Ajax requests |
# ------------------------------------------------------------------------------
# Enable cross-origin Ajax requests.
# http://code.google.com/p/html5security/wiki/CrossOriginRequestSecurity
# http://enable-cors.org/
# <IfModule mod_headers.c>
# Header set Access-Control-Allow-Origin "*"
# </IfModule>
# Header set Header set Access-Control-Allow-Origin "*"
# Header always set Access-Control-Allow-Credentials "true"
Access-Control-Allow-Origin "http://your-page.com:80"
Header always set Access-Control-Allow-Methods "POST, GET, OPTIONS, DELETE, PUT"
Header always set Access-Control-Allow-Headers "My-First-Header,My-Second-Header,Authorization, content-type, csrf-token"
