Fetch n'envoie pas d'en-têtes personnalisés

Question

J'essaie d'envoyer un en-tête personnalisé dans un appel de récupération, mais il semble que les en-têtes ne soient pas envoyés pour une raison quelconque. J'ai trouvé quelques questions qui semblaient indiquer que le mode 'cors' devait être défini comme une option d'extraction, mais j'ai essayé et cela n'a pas fait de différence.

Dans la console que je reçois cette erreur:

Fetch API cannot load http://localhost:8000/GroupRoutePermission. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8082' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled. 

Cependant si je retire l'en-tête-clé x-api de ma demande de récupération, je ne reçois pas d'erreur de la console CORS et obtenez un JSON réponse très bien - mon JSON avec une erreur qui dit que la clé API n'est pas définie (comme prévu).

J'ai également atteint mon point de terminaison avec Postman avec un jeu de clés x-api, et cela fonctionne très bien. Assez curieusement j'ai arraché le code ci-dessous d'un de mes projets précédents, et dans ce projet l'en-tête personnalisé est envoyé très bien (même sans mode cors), donc je ne sais pas quoi faire d'autre.

let apiKey = "" 
if (typeof localStorage.apiKey != 'undefined') 
    apiKey = localStorage.apiKey 
else 
    window.location = "/login" 

console.log(apiKey) 

fetch(url,{ 
    credentials: 'include', 
    mode: 'cors', 
    headers: new Headers({ 
     'Content-Type': 'text/plain', 
     'x-api-key': localStorage.apiKey 
    }) 
}) 

onglet Réseau Chrome têtes de demande:

Accept:*/* 
Accept-Encoding:gzip, deflate, sdch, br 
Accept-Language:en-US,en;q=0.8,fr-CA;q=0.6,fr;q=0.4,en-CA;q=0.2 
Access-Control-Request-Headers:x-api-key 
Access-Control-Request-Method:GET 
Cache-Control:max-age=0 
Connection:keep-alive 
Host:localhost:8000 
Origin:http://localhost:8082 
Referer:http://localhost:8082/lists/ResearchTrial 
User-Agent:Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/54.0.2840.90 Safari/537.36 

têtes de réponse avec X-Api-clés envoyés:

HTTP/1.1 200 OK 
Host: localhost:8000 
Connection: close 
X-Powered-By: PHP/5.5.38-4+deb.sury.org~xenial+1 
Allow: GET,HEAD 
Cache-Control: no-cache 
Content-Type: text/html; charset=UTF-8 
Date: Tue, 12 Sep 2017 19:30:58 GMT 

têtes de réponse si je retire X-Api-clé dans la demande:

HTTP/1.1 200 OK 
Host: localhost:8000 
Connection: close 
X-Powered-By: PHP/5.5.38-4+deb.sury.org~xenial+1 
Access-Control-Allow-Origin: http://localhost:8082 
Access-Control-Allow-Credentials: true 
Access-Control-Allow-Headers: Content-Type, Content-Length, Accept- Encoding, X-Api-Key 
Access-Control-Allow-Methods: GET, POST, OPTIONS, PUT, DELETE 
Cache-Control: no-cache 
Content-Type: application/json 
Date: Tue, 12 Sep 2017 19:28:29 GMT 

Aidez-nous!

Answer 1

I've ripped the below code out of a previous project of mine, and in that project the custom header gets sent just fine (even without cors mode), so I'm at a loss as to what else to try.

Ce projet faisait-il également des demandes inter-domaines? Je pense que l'API enverra les en-têtes cors lorsque l'authentification échouera, mais n'enverra pas les en-têtes lorsque l'authentification réussira. Cela n'affecte pas Postman, qui n'a pas à s'inquiéter des cors.

Vous devriez pouvoir le confirmer dans Postman en envoyant une requête authentifiée et en vérifiant les en-têtes de réponse.