fetch() sendet keine Header?

Question 1

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.

Question 2

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.

Question 3

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.

Question 4

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

Question 5

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

        }
    }

Question 6

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