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




vue js fetch api (4)

1er: lorsque vous appelez des en-têtes dans votre fonction exports.createCompany, vous avez let headers = ['Headers: '] avec un H majuscule au lieu de minuscule h ce qui pourrait 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'ai utilisé des requêtes de récupération dans rea native, l'en- header: n'a pas besoin des 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 })

J'envoie une requête POST comme celle-ci 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 parvient à mon serveur principal, elle ne contient pas d'en X-My-Custom-Header ni d' 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 pas d'en X-My-Custom-Header ni d' 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 le en X-My-Custom-Header ni le header Authorization n’avaient été envoyés à partir du navigateur ... Les questions sont désormais 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 une Request et en particulier d'ajouter des en-têtes à l'aide de req.headers.append() . Les en-têtes ne sont toujours pas envoyés.


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()

        }
    }


Premièrement : Utilisez 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!

Thridly : le mode 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 l'en Content-Type tête Content-Type est envoyé, et non l'en X-My-Custom-Header Authorization ou l' Authorization .







fetch-api