fetch() sendet keine Header?

Lesezeit: 6 Minuten

Benutzer-Avatar
Rasto

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

Bis die Anfrage mein Back-End erreicht, enthält sie noch nicht X-My-Custom-Header Noch 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 for Firebase-Funktion enthält keine X-My-Custom-Header Noch Authorization Header.

Was ist falsch?


Bearbeiten 1

Die Verwendung von Entwicklungstools in Chrome hat dies also nicht überprüft X-My-Custom-Header Noch Authorization Header wird vom Browser gesendet… Die Fragen sind jetzt: Warum? Wie kann ich es beheben?


Bearbeiten 2

Weitere Informationen zu meiner App: Es ist die React-App. Ich habe einen deaktivierten Servicemitarbeiter. Ich habe versucht zu erstellen Request und fügen Sie speziell Header mit hinzu req.headers.append(). Die Header würden immer noch nicht gesendet.

  • Sendet Ihr Browser tatsächlich die Header? Überprüfen Sie Ihre Entwicklungstools.

    – Joe Ton

    9. August 2017 um 13:10 Uhr

  • @JoeClay Ich bin ein erfahrener Entwickler (mobil, Backend), aber ziemlich neu in der Entwicklung von Web-Frontends. Viele Tools sind neu für mich – vor allem Dev-Tools in Brownser sind noch kein sehr guter Freund von mir. Können Sie vorschlagen, wie ich es in Chrome oder Safari überprüfen kann? Vielen Dank

    – Rasto

    9. August 2017 um 19:42 Uhr

  • Drücken Sie in Chrome F12, um Ihre Entwicklungstools zu öffnen, und wechseln Sie dann zur Registerkarte Netzwerk. Wenn Ihre Anwendung eine HTTP-Anforderung sendet, wird sie in der Liste angezeigt, und Sie können darauf klicken, um die Kopfzeilen/den Text der Anforderung und Antwort anzuzeigen. Sehen die Dokumente für weitere Informationen – zu lernen, wie man die Entwicklungstools Ihres Browsers verwendet, wird Ihnen sehr helfen, wenn Sie gerade erst mit der Webentwicklung beginnen 🙂

    – Joe Ton

    10. August 2017 um 8:10 Uhr

  • @JoeClay Die Antwort lautet also nein Der Browser sendet nicht X-My-Custom-Header Noch Authorization. Jetzt sind die verbleibenden Fragen, warum? Und wie kann man es beheben?

    – Rasto

    10. August 2017 um 16:45 Uhr

  • Siehe stackoverflow.com/questions/42311018/… unter Why does Fetch API Send the first PUT request as OPTIONS

    – Gast271314

    12. August 2017 um 18:55 Uhr


Benutzer-Avatar
Wassilij Faronow

Das Same-Origin-Policy schränkt die Arten von Anforderungen ein, die eine Webseite an Ressourcen eines anderen Ursprungs senden kann.

In dem no-cors Modusist der Browser darauf beschränkt, „einfache“ Anfragen zu senden – solche mit sichere Methoden und Überschriften auf der sicheren Liste nur.

Um eine Cross-Origin-Anfrage mit Headern wie Authorization und X-My-Custom-Headermüssen Sie die fallen lassen no-cors Modus und unterstützt Preflight-Anfragen (OPTIONS).

Die Unterscheidung zwischen „einfachen“ und „nicht einfachen“ Anfragen ist historisch bedingt. Webseiten konnten immer einige Cross-Origin-Anfragen auf verschiedene Weise ausführen (z. B. Erstellen und Absenden eines Formulars). Als Webbrowser also ein prinzipielles Mittel zum Senden von Cross-Origin-Anfragen einführten (Cross-Origin-Ressourcenfreigabeoder CORS) wurde entschieden, dass solche „einfachen“ Anfragen vom Preflight ausgenommen werden können OPTIONS überprüfen.

  • Tolle Antwort, danke. Allerdings nicht die Antwort, die mich glücklich machen würde. Ich versuche jetzt, Unterstützung für CORS hinzuzufügen.

    – Rasto

    11. August 2017 um 17:41 Uhr


  • @sideshowbarker ja, definitiv. Es ist. Nur CORS gut zu unterstützen, scheint nicht sehr einfach zu sein

    – Rasto

    11. August 2017 um 18:07 Uhr

  • @sideshowbarker Werfen Sie einen Blick auf mein Profil, sein Alter, Abzeichen und ältere Fragen. Daraus sollten Sie verstehen, dass ich weiß, was ich gefragt habe und wie ich es als akzeptiert markieren kann, danke. Wenn Sie anderen wirklich raten möchten, was sie mit Antworten und Prämien tun sollen, können Sie dies auf Meta tun. Was diese Antwort betrifft, so markiere ich sie möglicherweise erst als akzeptiert, wenn CORS auf dem Server unterstützt wird. Ohne das habe ich keinen Beweis dafür, dass dies wirklich funktioniert (und 500 sind eine Menge Wiederholungen, die man für falsche Antworten ausgeben muss). Wie Sie wissen sollten, bin ich nicht verpflichtet, es als akzeptiert zu markieren, selbst wenn es funktioniert, da ich möglicherweise auf weitere/bessere Antworten warte.

    – Rasto

    11. August 2017 um 18:27 Uhr


  • Um Missverständnisse zu vermeiden: Ich mag Vasiliys Antwort wegen ihrer hohen Qualität sehr und werde höchstwahrscheinlich akzeptiert, wenn sie funktioniert, sobald ich die CORS-Unterstützung am Back-End (Firebase-Funktionen) zum Laufen bringen kann.

    – Rasto

    11. August 2017 um 18:35 Uhr


  • stackoverflow.com/questions/42755131/… Dies könnte helfen.

    – KapitänHier

    11. August 2017 um 21:35 Uhr

Benutzer-Avatar
Damian

zuerst : 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 in Kleinbuchstaben geschrieben fetch!!

Drittens : no-cors mode 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 )

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

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

Benutzer-Avatar
Greeshma

Ich hatte auch das gleiche Problem. Ich habe es gelöst, indem ich „no-cors“ aus Javascript entfernt und Folgendes im serverseitigen Spring Boot hinzugefügt habe.

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

        }
    }

Benutzer-Avatar
Timmehlkk

Erstens: Wenn Sie Header in Ihrer Funktion exports.createCompany aufrufen, haben Sie let headers = ['Headers: '] mit Kapital H statt Kleinbuchstaben h was zu Fehlern führen kann. Sie haben auch ein Komma nach dem Token in den Headern, das nicht dort sein sollte.

2.: Jedes Mal, wenn ich Abrufanfragen in React Native verwendet habe, die header: braucht die nicht new Headers darauf.

Versuche dies:

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

  • eine Anmerkung zum abschließenden Komma, es wird zum Standard ES2017, aber die Leute haben es mit Babel verwendet (babeljs.io/docs/plugins/syntax-trailing-function-commas) und auch NodeJS unterstützt es seit Version 6.4.0. Dies sollte sich nicht auf das OP auswirken, da ich nachgestellte Kommas verwendet habe fetch() vorher mit erfolg.

    – Sgnl

    17. August 2017 um 0:50 Uhr


  • Diese Antwort geht weder auf die erste noch auf die zweite Frage ein. Es gibt nur einige Syntaxkorrekturen.

    – punggi

    10. Oktober 2018 um 13:34 Uhr

  • eine Anmerkung zum abschließenden Komma, es wird zum Standard ES2017, aber die Leute haben es mit Babel verwendet (babeljs.io/docs/plugins/syntax-trailing-function-commas) und auch NodeJS unterstützt es seit Version 6.4.0. Dies sollte sich nicht auf das OP auswirken, da ich nachgestellte Kommas verwendet habe fetch() vorher mit erfolg.

    – Sgnl

    17. August 2017 um 0:50 Uhr


  • Diese Antwort geht weder auf die erste noch auf die zweite Frage ein. Es gibt nur einige Syntaxkorrekturen.

    – punggi

    10. Oktober 2018 um 13:34 Uhr

1011370cookie-checkfetch() sendet keine Header?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy