javascript - marine - elecciones francia 2022

fetch() no envía encabezados?

Question

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.

Answer 1

¿Puedes probar esto?

fetch(serverEndpoint, {  
  credentials: ''include''  
})

Árbitro. https://developers.google.com/web/updates/2015/03/introduction-to-fetch#sending_credentials_with_a_fetch_request

Answer 2

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.

Answer 3

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

Answer 4

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

        }
    }

Answer 5

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-Type y 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 .