javascript - vanilla - Fetch() sendet keine Header?




vanilla js fetch (4)

1. Wenn Sie in Ihrer exports.createCompany-Funktion Header aufrufen, haben Sie headers let headers = ['Headers: '] mit einem Großbuchstaben H anstelle von Kleinbuchstaben h was zu Fehlern führen kann. Sie haben auch ein Komma nach dem Token in den Kopfzeilen, die nicht vorhanden sein sollten.

2. Immer wenn ich Fetch Requests in React Native verwendet habe, benötigt der header: keine new Headers .

Versuchen Sie 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 }) : 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 })

Ich sende eine POST-Anfrage wie diese vom Browser aus:

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

Wenn die Anfrage mein Back-End erreicht, enthält sie weder den X-My-Custom-Header noch den Authorization Header.

Mein Back-End ist die Google Cloud-Funktion für Firebase (im Grunde nur Node.js Endpunkt), die so aussieht:

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)
    ...
}

Das Konsolenprotokoll dieser Google Cloud für Firebase-Funktion enthält weder einen X-My-Custom-Header noch einen Authorization Header.

Was ist falsch?

Bearbeiten 1

Bei der Verwendung von Dev-Tools in Chrome wurde überprüft, ob weder der X-My-Custom-Header noch der Authorization Header vom Browser gesendet werden. Die Fragen lauten nun: Warum? Wie behebe ich das?

Bearbeiten 2

Weitere Informationen zu meiner App: Es ist React App. Ich habe einen behinderten Servicemitarbeiter. Ich habe versucht, mit req.headers.append() eine Request zu erstellen und speziell Header req.headers.append() . Die Header würden immer noch nicht senden.


Die Richtlinie für denselben Ursprung schränkt die Arten von Anforderungen ein, die eine Webseite an Ressourcen von einem anderen Ursprung senden kann.

Im no-cors mode kann der Browser nur "einfache" Anforderungen senden - nur solche mit Methoden in Listen sicherer Adressen und Kopfzeilen in Listen sicherer Adressen .

Um eine OPTIONS Anfrage mit Headern wie Authorization und X-My-Custom-Header zu senden, müssen Sie den no-cors Modus OPTIONS und Preflight-Anfragen ( OPTIONS ) unterstützen.

Die Unterscheidung zwischen "einfachen" und "nicht einfachen" Anfragen hat historische Gründe. Webseiten konnten einige ursprungsübergreifende Anforderungen immer auf verschiedene Weise ausführen (z. B. durch Erstellen und Senden eines Formulars). Als Webbrowser also ein prinzipielles Mittel zum Senden von ursprungsübergreifenden Anforderungen einführten ( Cross-Origin Resource Sharing , CORS), war dies der Fall entschieden, dass solche "einfachen" Anforderungen von der Preflight- OPTIONS Prüfung ausgenommen werden OPTIONS .



Erstens : Verwenden Sie ein Objekt anstelle von new Headers(..) :

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

Zweitens : Gut zu wissen, dass Kopfzeilen durch fetch niedrigere fetch !!

Drittens : Der no-cors Modus beschränkt die Verwendung von Headern auf diese weiße Liste:

  • Accept
  • Accept-Language
  • Content-Language
  • Content-Type und dessen Wert ist ( application/x-www-form-urlencoded , multipart/form-data , text/plain )

Aus diesem Grund wird nur Ihr Content-Type Header gesendet und nicht X-My-Custom-Header oder Authorization .





fetch-api