Dans l'enquête ci-dessous en tant qu'API, j'utilise http://example.com au lieu de http: // myApiUrl / login à partir de votre question, car cette première fonctionne.
Je suppose que votre page est sur http: //my-site.local: 8088 .
La raison pour laquelle vous voyez des résultats différents est que Postman:
- définir l'en-tête
Host=example.com(votre API)
- PAS définir l'en-tête
Origin
Ceci est similaire à la façon dont les navigateurs envoient des demandes lorsque le site et l'API ont le même domaine (les navigateurs définissent également l'élément d'en-tête Referer=http://my-site.local:8088, mais je ne le vois pas dans Postman). Lorsque l'en- Origintête n'est pas défini, les serveurs autorisent généralement de telles demandes par défaut.
C'est la manière standard dont Postman envoie les demandes. Mais un navigateur envoie des demandes différemment lorsque votre site et votre API ont des domaines différents , puis CORS se produit et le navigateur automatiquement:
- définit l'en-tête
Host=example.com(le vôtre comme API)
- définit l'en-tête
Origin=http://my-site.local:8088(votre site)
(L'en-tête Referera la même valeur que Origin). Et maintenant, dans l' onglet Console et réseaux de Chrome, vous verrez:
Lorsque vous disposez de Host != OriginCORS, et lorsque le serveur détecte une telle demande, il la bloque généralement par défaut .
Origin=nullest défini lorsque vous ouvrez du contenu HTML à partir d'un répertoire local et envoie une demande. La même situation se produit lorsque vous envoyez une demande à l'intérieur d'un <iframe>, comme dans l'extrait ci-dessous (mais ici l'en- Hosttête n'est pas défini du tout) - en général, partout où la spécification HTML dit origine opaque, vous pouvez traduire cela en Origin=null. Vous trouverez plus d'informations à ce sujet ici .
fetch('http://example.com/api', {method: 'POST'});
Look on chrome-console > network tab
Si vous n'utilisez pas une simple demande CORS, généralement le navigateur envoie automatiquement une demande OPTIONS avant d'envoyer la demande principale - plus d'informations sont ici . L'extrait ci-dessous le montre:
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)
Vous pouvez modifier la configuration de votre serveur pour autoriser les requêtes CORS.
Voici un exemple de configuration qui active CORS sur nginx (fichier nginx.conf) - soyez très prudent avec le réglage always/"$http_origin"pour nginx et "*"pour Apache - cela débloquera CORS de n'importe quel domaine.
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;
}
}
Voici un exemple de configuration qui active CORS sur Apache (fichier .htaccess)
# ------------------------------------------------------------------------------
# | 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"
