web-dev-qa-db-fra.com

Utilisation de l'API fetch avec le mode: «no-cors», ne peut pas définir les en-têtes de demande

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 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ù il me demande le nom d'utilisateur et le mot de passe Popup where its asking me for username and password

Appels de demande et de réponse à partir des onglets réseau Request and response calls from the network tabs

reactjsreact-nativefetch-api
8
sumit bhanwala

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

Explication:

  1. no-cors le mode de demande définit la propriété guard d'un objet d'en-tête sur request-no-cors

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

    1. Normaliser valeur.

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

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

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

    5. Sinon, si le gardien est "request-no-cors" et le nom/la valeur n'est pas un CORS-safelisted request-header, revenir. ← votre scénario

    6. Sinon, si guard est "response" et name est un nom d'en-tête de réponse interdit, retournez.

    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 uniquement si la valeur est l'une des:
      • application/x-www-form-urlencoded
      • multipart/form-data
      • text/plain

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

14
Dzmitry Bachko