web-dev-qa-db-fra.com

fetch () n'envoie pas les en-têtes?

J'envoie une demande POST comme ceci depuis le 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
})

Au moment où la demande atteint mon back-end, elle ne contient pas d'en-tête X-My-Custom-Header ni Authorization. 

Mon back-end est la fonction Google Cloud pour Firebase (essentiellement un noeud final Node.js) 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 cette fonction Google Cloud pour Firebase ne contient aucun en-tête X-My-Custom-Header ni Authorization.

Qu'est-ce qui ne va pas?

Modifier 1

Donc, en utilisant les outils de développement dans Chrome, nous avons vérifié que ni l'en-tête X-My-Custom-Header, ni l'en-tête Authorization n'étaient envoyés depuis le navigateur ... Les questions sont maintenant les suivantes: Pourquoi? Comment je le répare?

Modifier 2

Plus d'informations sur mon application: c'est l'application React. J'ai un employé de service handicapé. J'ai essayé de créer Request et d'ajouter spécifiquement des en-têtes à l'aide de req.headers.append(). Les en-têtes ne sont toujours pas envoyés. 

javascripthttppostcorsfetch-api
41
Rasto

La règle same-Origin policy limite les types de demandes qu'une page Web peut envoyer aux ressources d'une autre origine.

En mode no-cors , le navigateur est limité à l’envoi de requêtes «simples» - celles avec méthodes avec liste sécurisée et en-têtes avec liste sécurisée uniquement.

Pour envoyer une demande d’origine croisée avec des en-têtes tels que Authorization et X-My-Custom-Header, vous devez abandonner le mode no-cors et prendre en charge les demandes de contrôle en amont (OPTIONS).

La distinction entre demandes «simples» et «non simples» est fondée sur des raisons historiques. Les pages Web peuvent toujours exécuter certaines demandes d'origine croisée par divers moyens (tels que la création et la soumission d'un formulaire). Ainsi, lorsque les navigateurs Web introduisent un moyen basé sur des principes d'envoi de demandes d'origine croisée ( partage de ressources d'origine croisée ou CORS ), il a été décidé que de telles demandes «simples» pourraient être exemptées de la vérification avant le vol OPTIONS.

54
Vasiliy Faronov

Premièrement : Utilise un objet au lieu de 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 minuscules par fetch !!

Thridly : no-cors limite l’utilisation des en-têtes à 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 en-tête Content-Type est envoyé et non pas X-My-Custom-Header ou Authorization.

11
Damien

Pouvez-vous essayer cela?

fetch(serverEndpoint, {  
  credentials: 'include'  
})

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

3
Frank R.

1er: lorsque vous appelez des en-têtes dans votre fonction exports.createCompany, vous avez let headers = ['Headers: '] avec une majuscule H au lieu de minuscule h qui peut provoquer des erreurs. vous avez aussi une virgule après le jeton dans les en-têtes qui ne devrait pas être là.

2ème: chaque fois que j’utilise les requêtes d’extraction dans réagit native, le header: n’a pas besoin du new Headers.

essayez ceci: fetch(serverEndpoint, { method: 'POST', mode: 'no-cors', redirect: 'follow', headers:{ 'Content-Type': 'text/plain', 'X-My-Custom-Header': 'value-v', 'Authorization': 'Bearer ' + token }, body: companyName }) 

0
Timmehlkk

J'ai aussi eu le même problème. Je l'ai résolu en supprimant 'no-cors' de javascript et en ajoutant les éléments suivants au démarrage du serveur.

public class WebSecurityConfig extends WebSecurityConfigurerAdapter {
        protected void configure(HttpSecurity httpSecurity) throws Exception {
             .antMatchers(HttpMethod.OPTIONS, "/**").permitAll()

        }
    }
0
Greeshma