web-dev-qa-db-de.com

fetch () sendet keine Header?

Ich versende eine POST -Anfrage wie folgt vom Browser:

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 Anforderung mein Backend erreicht, enthält sie weder X-My-Custom-Header noch Authorization Header. 

Mein Backend ist die Google Cloud-Funktion für Firebase (im Wesentlichen nur der Endpunkt Node.js), die folgendermaßen 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 keine X-My-Custom-Header- oder Authorization-Header.

Was ist falsch?


Bearbeiten 1

Bei der Verwendung von dev-Tools in Chrome wurde überprüft, dass weder der X-My-Custom-Header- noch der Authorization-Header vom Browser gesendet wird. Die Fragen lauten nun: Warum? Wie kann ich das beheben?


Bearbeiten 2

Weitere Informationen zu meiner App: It's React App. Ich habe einen Service-Mitarbeiter deaktiviert. Ich habe versucht, Request zu erstellen und speziell Header mit req.headers.append() hinzuzufügen. Die Header würden immer noch nicht senden. 

41
Rasto

Die same-Origin-Richtlinie schränkt die Arten von Anforderungen ein, die eine Webseite an Ressourcen aus einem anderen Origin senden kann.

Im no-corsModus ist der Browser darauf beschränkt, "einfache" Anfragen zu senden - nur mit safelisted Methoden und safelisted Headern .

Um eine Cross-Origin-Anforderung mit Kopfzeilen wie Authorization und X-My-Custom-Header zu senden, müssen Sie den no-cors-Modus löschen und Preflight-Anforderungen (OPTIONS) unterstützen.

Die Unterscheidung zwischen "einfachen" und "nicht einfachen" Anfragen erfolgt aus historischen Gründen. Webseiten könnten immer einige Ursprungsanforderungen auf verschiedene Weise ausführen (z. B. durch Erstellen und Übermitteln eines Formulars). Wenn Webbrowser eine grundsätzliche Methode zum Senden von Ursprungsanforderungen ( Ursprungsübergreifende Ressourcennutzung oder CORS) eingeführt haben ) wurde entschieden, dass solche „einfachen“ Anforderungen von der Preflight-Prüfung OPTIONS ausgenommen werden können.

54
Vasiliy Faronov

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, Kopfzeilen werden durch fetch abgesenkt !!

Thridly : no-cors-Modus schränkt die Verwendung von Headern auf diese Whitelist ein:

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

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

11
Damien

Kannst du das versuchen?

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

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

3
Frank R.

Erstens: Wenn Sie in Ihrer exports.createCompany-Funktion Header aufrufen, haben Sie let headers = ['Headers: '] mit einer H-Großzahl anstelle von h in Kleinbuchstaben, was zu Fehlern führen kann. Sie haben auch ein Komma nach dem Zeichen in den Kopfzeilen, das nicht vorhanden sein sollte.

Zweitens: Jedes Mal, wenn ich Abrufanfragen in reaktiver Weise verwendet habe, benötigt header: nicht den new Headers.

versuchen Sie folgendes: 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

Ich hatte auch das gleiche Problem. Ich löste es, indem ich "no-cors" aus Javascript entfernte und Folgendes in serverseitigem Springboot hinzufügte.

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

        }
    }
0
Greeshma