Utilisation de l'API fetch avec le mode: 'no-cors', impossible de définir les en-têtes de requête

Question

J'essaie d'atteindre un point de terminaison de service et le service est un service de connexion J'utilise le type d'authentification comme base, Le code est en réagissant et en utilisant la bibliothèque d'extraction mais même si je définis le champ d'en-têtes dans ma demande, je suis incapable de voir les valeurs des en-têtes correspondants dans ma demande dans l'onglet réseau?

Voici le code:

var obj = { 
    method: 'GET' , 
    mode : 'no-cors', 
    headers: { 
     'Access-Control-Request-Headers': 'Authorization', 
     'Authorization': 'Basic amFzcGVyYWRtaW46amFzcGVyYWRtaW4=', 
     'Content-Type': 'application/json', 
     'Origin': '' 
    }, 
    credentials: 'include' 
}; 
fetch('http://myreport:8082/jasperserver/rest/login/', obj).then(… 

---

Popup où son me demander le nom d'utilisateur et mot de passe

---

demande et la réponse des appels à partir des onglets du réseau

Answer 1

Aucun de vos en-têtes n'est CORS-safelisted, donc ils ne peuvent pas être attachés à la demande.

Explication:

1. mode de demande no-cors fixe guard propriété pour un objet en-têtes à request-no-cors

2. Pour ajouter un nom/valeur (nom/valeur) paire à un objet en-têtes (en-têtes), le navigateur ont pour exécuter ces étapes:

   1. Normaliser la valeur.

   2. Si le nom n'est pas un nom ou si la valeur n'est pas une valeur, lancez une erreur TypeError.

   3. Si la garde est "immuable", lancez une erreur TypeError.

   4. Sinon, si guard est "request" et name est un nom d'en-tête interdit, return.

   5. Sinon, si la garde est "request-no-cors" et que name/value n'est pas CORS-safelisted request-header, retour. ← votre scénario

   6. Sinon, si la garde est « réponse » et le nom est un nom interdit-tête de réponse, le retour.

   7. Ajoutez le nom/la valeur à la liste d'en-tête.

3. CORS-safelisted request-header (insensible à la casse):
   • Accept
   • Accept-Language
   • Content-Language
   • Content-Type, mais seulement si la valeur est l'une de:
     • application/x-www-form-urlencoded
     • multipart/form-data
     • text/plain

Vous pouvez en savoir plus sur Headers class spécifications ici de ira chercher https://fetch.spec.whatwg.org/#headers-class