web-dev-qa-db-fra.com

Sec-Fetch-Mode au lieu de Preflight

J'ai créé la connexion FE et l'ai terminée. Et comme d'habitude, mon goto pour ajax était Axios. Mon code est le suivant.

const baseUrl = http://localhost:5000/project/us-central1/api

Axios.post(
 `${baseUrl}/v1/user/login`,
 { ...data },
 {
  headers: {
   Authorization: 'Basic auth...'
  }
 },
).then(r => console.log(r).catch(e =>console.log(e));

Maintenant, lorsque j'essaie d'envoyer une demande à ma fonction cloud Firebase locale. Je reçois une 400 mauvaise demande.

response

après avoir vérifié la demande, je me demandais pourquoi il n'envoyait aucune demande de contrôle en amont, ce qu'il devrait faire (au meilleur de ma connaissance) mais à la place, j'ai vu un en-tête nommé Sec-Fetch-Mode. J'ai cherché n'importe où c'est un peu abstrait. Et je n'arrive pas à comprendre pourquoi ma demande échoue toujours.

Y a-t-il quelque chose que je manque dans ma configuration de axios?

Mon FE fonctionne sur un plugin VSCode nommé live server(http://127.0.0.1:5500)

De plus, ma fonction cloud Firebase a activé cors

// cloud function expres app
cors({
 Origin: true
})

Toute idée serait très utile.

javascriptfirebaseexpressgoogle-cloud-functionsaxios
16
Reyn

La demande OPTIONS est actuellement envoyée, car vous envoyez une demande d'origine croisée avec un en-tête Authorization qui est considéré comme non simple. Il ne s'affiche pas dans les outils de développement en raison d'une fonctionnalité/d'un bug dans Chrome 76 & 77. Voir Chrome ne montrant pas les demandes OPTIONS dans l'onglet Résea pour plus d'informations.

La demande de contrôle en amont est un mécanisme qui permet de refuser les demandes d'origine croisée du côté du navigateur si le serveur ne connaît pas CORS (par exemple: ancien et non maintenu) , ou s'il souhaite explicitement refuser les demandes d'origine croisée (dans les deux cas, le serveur ne définira pas le Access-Control-Allow-Origin entête). Ce que fait CORS pourrait être fait côté serveur en vérifiant l'en-tête Origin, mais CORS aide en fait à filtrer les demandes d'origine croisée indésirables avant même qu'elles ne soient envoyées, réduisant ainsi le trafic réseau et la charge du serveur, et empêchant la les anciens serveurs ne reçoivent par défaut aucune demande cross-Origin.

D'autre part, Sec-Fetch-Mode est l'un des Récupérer les en-têtes de métadonnées (Sec-Fetch-Dest, Sec-Fetch-Mode, Sec-Fetch-Site et Sec-Fetch-User). Ces en-têtes sont destinés à informer le serveur du contexte dans lequel la demande a été envoyée. Sur la base de ces informations supplémentaires, le serveur peut alors déterminer si la demande semble légitime ou simplement la refuser. Ils existent pour aider les serveurs HTTP à atténuer certains types d'attaques et ne sont pas liés à CORS.

Par exemple, le bon vieux <img src="https://mybank.com/giveMoney?amount=9999999&[email protected]"> l'attaque a pu être détectée côté serveur car le Sec-Fetch-Dest serait défini sur "image" (ceci est juste un exemple simple, impliquant que le serveur expose les points de terminaison avec la méthode GET pour les opérations monétaires ce qui n'est évidemment pas le cas dans la vie réelle).

En conclusion, les en-têtes de métadonnées d'extraction ne sont pas conçus pour remplacer les demandes de contrôle en amont, mais plutôt pour coexister avec eux car ils répondent à des besoins différents. Et l'erreur 400 n'a probablement rien à voir avec ceux-ci, mais plutôt avec la demande qui n'est pas conforme à la spécification du point de terminaison.

33
Guerric P

Il vous manque un point sur votre opérateur d'étalement, voici la syntaxe correcte:

{ ...Les données }

Notez les trois points avant "données".

Veuillez consulter l'utilisation des opérateurs d'étalement avec des objets ici:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax

0
santamanno