fetch() n’envoie pas d’en-têtes ?

Question

Je vais donc envoyer une requête POST comme ceci à partir du navigateur:

fetch(serverEndpoint, {
    method: 'POST',
    mode: 'no-cors', // this is to prevent browser from sending 'OPTIONS' method request first
    redirect: 'follow',
    headers: new Headers({
            'Content-Type': 'text/plain',
            'X-My-Custom-Header': 'value-v',
            'Authorization': 'Bearer ' + token,
    }),
    body: companyName
})

Par le temps que la demande atteint mon back-end, il ne contient pas d' X-My-Custom-Header ni Authorization - tête.

Mon back-end est Google Cloud fonction de Firebase (fondamentalement juste Node.js point de terminaison) qui ressemble à ceci:

exports.createCompany = functions.https.onRequest((req, res) => {
    let headers = ['Headers: ']
    for (let header in req.headers) {
        headers.push(`${header} : ${req.headers[header]}`)
    }
    console.log(headers)
    ...
}

Le journal de la console de Google Cloud pour Firebase fonction ne contient aucun X-My-Custom-Header ni Authorization - tête.

Quel est le problème?

---

Edit 1

Donc à l'aide d'outils de dev de Chrome a vérifié que ni X-My-Custom-Header ni Authorization - tête est de l'envoyer à partir du navigateur... Les questions sont maintenant: Pourquoi? Comment puis-je résoudre ce problème?

---

Edit 2

Plus d'informations sur mon app: C'est Réagir app. J'ai désactivé le service du travailleur. J'ai essayé de créer Request et spécifiquement ajouter des en-têtes à l'aide de req.headers.append(). Les en-têtes de ne pas envoyer.

Answer 1

La même la politique de l'origine restreint les types de demandes que d'une page Web peut envoyer à des ressources à partir d'une autre origine.

Dans l' no-cors mode, le navigateur est limitée à l'envoi "simple" demande - ceux avec safelisted méthodes et safelisted les en-têtes uniquement.

Pour envoyer un cross-origin demande avec des en-têtes comme Authorization et X-My-Custom-Header, vous devez déposer l' no-cors mode de soutien et de contrôle en amont des demandes (OPTIONS).

La distinction entre "simple" et "non simple" demande est pour des raisons historiques. Pages Web pourrait toujours effectuer quelques croix-de l'origine des demandes par le biais de divers moyens (telles que la création et l'envoi d'un formulaire), de sorte que lorsque les navigateurs Web introduit une approche fondée sur les moyens de l'envoi de la croix-origine des demandes (cross-origin resource sharing, ou de la SCRO), il a été décidé que cette "simple" demandes pourraient être exemptés du contrôle en amont OPTIONS vérifier.

Answer 2

Tout d'abord : l'Utilisation d'un objet au lieu de l' new Headers(..):

fetch('www.example.net', {
  method: 'POST',
  headers: {
    'Content-Type': 'text/plain',
    'X-My-Custom-Header': 'value-v',
    'Authorization': 'Bearer ' + token,
  }
});

Deuxièmement : Bon à savoir, les en-têtes sont mises en minuscule en fetch!!

Thridly : no-cors mode limite l'utilisation des en-têtes de cette liste blanche :

• Accept
• Accept-Language
• Content-Language
• Content-Type et dont la valeur est ( application/x-www-form-urlencoded, multipart/form-data, text/plain )

C'est pourquoi seul votre Content-Type - tête est envoyée, et non pas X-My-Custom-Header ou Authorization.

Answer 3

Vous pouvez essayer cela ?

Réf. https://developers.google.com/web/updates/2015/03/introduction-to-fetch#sending_credentials_with_a_fetch_request

Answer 4

J’ai également eu ce même problème. Je l’ai résolu en supprimant « no-cors » dans javascript et adjonction, démarrage de printemps pour le côté serveur.

Answer 5

1er : lorsque vous appelez des headers dans la fonction exports.createCompany, vous avez avec un capital au lieu de minuscules `` qui peut entraîner erreurs. vous avez aussi une virgule après le jeton dans les en-têtes qui ne devrait pas être là.

2e : chaque fois que j’ai utilisé fetch prie en natif de réagir, la n’a pas besoin du là-dessus.

Essayez ceci : ``