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 encabezado de Authorization .
Mi back-end es la función Google Cloud para Firebase (básicamente solo el punto final de 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 para Firebase no contiene ningún X-My-Custom-Header ni Authorization .
¿Lo que está mal?
Entonces, al usar las herramientas de desarrollo en Chrome, verifiqué que ni 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?
Más información sobre mi aplicación: es la aplicación React. Tengo trabajador de servicio deshabilitado. Intenté crear una Request y específicamente agregar encabezados usando req.headers.append() . Los encabezados aún no se enviarían.
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", solo aquellas con métodos y encabezados de lista segura.
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" se debe a razones históricas. Las páginas web siempre podían realizar algunas solicitudes de origen cruzado a través de varios 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), era decidió que tales solicitudes "simples" podrían estar exentas de la verificación de OPTIONS previa al vuelo.
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 saberlo, ¡los encabezados se ponen en minúsculas al fetch !
En tercer lugar : el modo no-cors limita el uso de encabezados a esta lista blanca:
AcceptAccept-LanguageContent-LanguageContent-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 .
¿Puedes probar esto?
fetch(serverEndpoint, { credentials: 'include' })