javascript - marine - elecciones francia 2022
fetch() no envía encabezados? (5)
Estoy enviando una solicitud POST como esta desde el navegador:
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
})
Cuando la solicitud llega a mi back-end, no contiene
X-My-Custom-Header
ni el encabezado de
Authorization
.
Mi back-end es la función Google Cloud para Firebase (básicamente solo el punto final Node.js) que se ve así:
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)
...
}
El registro de la consola de esa función de Google Cloud for Firebase no contiene ningún
X-My-Custom-Header
ni
Authorization
.
¿Qué está mal?
Editar 1
Entonces, usando las herramientas de desarrollo en Chrome, verifiqué que ni el
X-My-Custom-Header
ni el encabezado de
Authorization
se envían desde el navegador ... Las preguntas ahora son: ¿Por qué?
¿Cómo lo soluciono?
Editar 2
Más información sobre mi aplicación: es la aplicación React.
He deshabilitado trabajador de servicio.
He intentado crear una
Request
y agregar encabezados específicamente usando
req.headers.append()
.
Los encabezados aún no se enviarían.
¿Puedes probar esto?
fetch(serverEndpoint, {
credentials: ''include''
})
La política del mismo origen restringe los tipos de solicitudes que una página web puede enviar a recursos de otro origen.
En el modo
no-cors
, el navegador se limita a enviar solicitudes "simples": aquellas con
métodos
seguros
y
encabezados seguros
.
Para enviar una solicitud de origen cruzado con encabezados como
Authorization
y
X-My-Custom-Header
, debe abandonar el modo
no-cors
y admitir solicitudes de verificación previa (
OPTIONS
).
La distinción entre solicitudes "simples" y "no simples" es por razones históricas.
Las páginas web siempre podían realizar algunas solicitudes de origen cruzado a través de diversos medios (como crear y enviar un formulario), por lo que cuando los navegadores web introdujeron un medio basado en principios para enviar solicitudes de origen
cruzado
(
intercambio de recursos de origen cruzado
o CORS), fue decidió que tales solicitudes "simples" podrían estar exentas de la verificación de
OPTIONS
previa al vuelo.
Primero: cuando llama a los encabezados en la función export.createCompany, ha
let headers = [''Headers: '']
con una
H
mayúscula en lugar de
h
minúscula que puede causar errores.
También tiene una coma después del token en los encabezados que no deberían estar allí.
2 °: cada vez que he usado solicitudes de búsqueda en react native, el
header:
no necesita los
new Headers
.
intente esto:
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 })
También tuve este mismo problema. Lo resolví eliminando ''no-cors'' de javascript y agregando lo siguiente en el arranque de primavera del lado del servidor.
public class WebSecurityConfig extends WebSecurityConfigurerAdapter {
protected void configure(HttpSecurity httpSecurity) throws Exception {
.antMatchers(HttpMethod.OPTIONS, "/**").permitAll()
}
}
En primer lugar
: use un objeto en lugar de
new Headers(..)
:
fetch(''www.example.net'', {
method: ''POST'',
headers: {
''Content-Type'': ''text/plain'',
''X-My-Custom-Header'': ''value-v'',
''Authorization'': ''Bearer '' + token,
}
});
En segundo lugar
: ¡Es bueno saber que los encabezados están en minúsculas por
fetch
!
En tercer lugar
: el modo
no-cors
limita el uso de encabezados a esta lista blanca:
-
Accept -
Accept-Language -
Content-Language -
Content-Typey cuyo valor es (application/x-www-form-urlencoded,multipart/form-data,text/plain)
Es por eso que solo se envía su encabezado
Content-Type
y no
X-My-Custom-Header
o
Authorization
.