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
Wassilij Faronow
Das Same-Origin-Policy schränkt die Arten von Anforderungen ein, die eine Webseite an Ressourcen eines anderen Ursprungs senden kann.
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
Damian
zuerst : Verwenden Sie ein Objekt anstelle von new Headers(..):
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()
}
}
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.
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
10113700cookie-checkfetch() sendet keine Header?yes
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
NochAuthorization
. 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