fetch () sendet keine Header?

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 X-My-Custom-Headerweder einen AuthorizationHeader noch einen Header.

Mein Backend ist die Google Cloud-Funktion für Firebase (im Grunde nur der Endpunkt von Node.j), 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 for Firebase-Funktion enthält weder einen Header X-My-Custom-Headernoch einen AuthorizationHeader.

Was ist falsch?

Bearbeiten 1

Wenn Sie also Entwickler-Tools in Chrome verwenden, wird überprüft, ob weder X-My-Custom-Headernoch AuthorizationHeader 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 Servicemitarbeiter mit Behinderung. Ich habe versucht, RequestHeader mit zu erstellen und spezifisch hinzuzufügen req.headers.append(). Die Header würden immer noch nicht senden.

Die Richtlinie mit demselben Ursprung beschränkt die Arten von Anforderungen, die eine Webseite an Ressourcen eines anderen Ursprungs senden kann.

Im no-cors Modus kann der Browser nur "einfache" Anforderungen senden - nur solche mit sicher gelisteten Methoden und sicher gelisteten Headern .

Um eine originensübergreifende Anfrage mit Headern wie Authorizationund zu senden X-My-Custom-Header, müssen Sie den no-corsModus löschen und Preflight-Anfragen unterstützen ( OPTIONS).

Die Unterscheidung zwischen „einfachen“ und „nicht einfachen“ Anfragen erfolgt aus historischen Gründen. Webseiten konnten immer einige Cross-Origin-Anfragen auf verschiedene Weise ausführen (z. B. durch Erstellen und Senden eines Formulars). Als Webbrowser ein prinzipielles Mittel zum Senden von Cross-Origin-Anfragen einführten ( Cross-Origin Resource Sharing oder CORS), war dies der Fall entschieden, dass solche „einfachen“ Anfragen von der Preflight- OPTIONSPrüfung ausgenommen werden könnten .

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, Header werden von fetch!!

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

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

Deshalb wird nur Ihr Content-TypeHeader gesendet und nicht X-My-Custom-Headeroder 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

Ich hatte auch das gleiche Problem. Ich habe es behoben, indem ich 'no-cors' aus Javascript entfernt und im serverseitigen Spring Boot Folgendes hinzugefügt habe.

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

        }
    }

1. Wenn Sie Header in Ihrer exports.createCompany-Funktion aufrufen, haben Sie let headers = ['Headers: ']ein Großbuchstaben Hanstelle von Kleinbuchstaben, hwas zu Fehlern führen kann. Sie haben auch ein Komma nach dem Token in den Kopfzeilen, das nicht vorhanden sein sollte.

2. Jedes Mal, wenn ich Fetch-Anfragen in React Native verwendet habe, header:braucht das nicht new Headersdarauf.

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