Habilitación de CORS en funciones en la nube para Firebase

Actualmente estoy aprendiendo a usar nuevas funciones de nube para Firebase y el problema que tengo es que no puedo acceder a la función que escribí a través de una solicitud AJAX. Me sale el error "No 'Access-Control-Allow-Origin'". Aquí hay un ejemplo de la función que escribí:

exports.test = functions.https.onRequest((request, response) => {
  response.status(500).send({test: 'Testing functions'});
})

La función se encuentra en esta url: https://us-central1-fba-shipper-140ae.cloudfunctions.net/test

Firebase docs sugiere agregar el middleware CORS dentro de la función, lo he probado pero no funciona para mí: https://firebase.google.com/docs/functions/http-events

Así es como lo hice:

var cors = require('cors');    

exports.test = functions.https.onRequest((request, response) => {
   cors(request, response, () => {
     response.status(500).send({test: 'Testing functions'});
   })
})

¿Qué estoy haciendo mal? Agradecería cualquier ayuda con esto.

ACTUALIZAR:

La respuesta de Doug Stevenson ayudó. Al agregar ({origin: true}) se solucionó el problema, también tuve que cambiar response.status(500)a lo response.status(200)que me perdí por completo al principio.

Hay dos funciones de muestra proporcionadas por el equipo de Firebase que demuestran el uso de CORS:

• Servidor horario con formato de fecha
• Punto final HTTPS que requiere autenticación

La segunda muestra usa una forma diferente de trabajar con cors que la que está usando actualmente.

Además, considere importar de esta manera, como se muestra en las muestras:

const cors = require('cors')({origin: true});

Puede configurar el CORS en la función de nube de esta manera

response.set('Access-Control-Allow-Origin', '*');

No es necesario importar el corspaquete

Para cualquiera que intente hacer esto en Typecript, este es el código:

import * as cors from 'cors';
const corsHandler = cors({origin: true});

export const exampleFunction= functions.https.onRequest(async (request, response) => {
       corsHandler(request, response, () => {});
       //Your code here
});

Una información adicional, solo por el bien de aquellos que buscan en Google después de un tiempo: si está utilizando Firebase Hosting, también puede configurar reescrituras, de modo que, por ejemplo, una URL como (firebase_hosting_host) / api / myfunction redirija a ( función firebase_cloudfunctions_host) / doStuff. De esa manera, dado que la redirección es transparente y del lado del servidor, no tiene que lidiar con cors.

Puede configurar eso con una sección de reescrituras en firebase.json:

"rewrites": [
        { "source": "/api/myFunction", "function": "doStuff" }
]

Ninguna solución CORS funcionó para mí ... ¡hasta ahora!

No estoy seguro de si alguien más se encontró con el mismo problema que yo, pero configuré CORS como 5 formas diferentes de los ejemplos que encontré y nada parecía funcionar. Configuré un ejemplo mínimo con Plunker para ver si realmente era un error, pero el ejemplo funcionó muy bien. Decidí verificar los registros de funciones de Firebase (que se encuentran en la consola de Firebase) para ver si eso podría decirme algo. Tuve un par de errores en mi código de servidor de nodo , no relacionados con CORS , que cuando depuré me liberaron de mi mensaje de error CORS . No sé por qué los errores de código no relacionados con CORS devuelven una respuesta de error CORS, pero me llevaron por el agujero de conejo equivocado durante un buen número de horas ...

tl; dr: verifique los registros de funciones de firebase si no hay soluciones CORS que funcionen y depure cualquier error que tenga

Tengo una pequeña adición a la respuesta de @Andreys a su propia pregunta.

Parece que no tiene que llamar a la devolución de llamada en la cors(req, res, cb)función, por lo que puede llamar al módulo cors en la parte superior de su función, sin incrustar todo su código en la devolución de llamada. Esto es mucho más rápido si desea implementar cors después.

exports.exampleFunction = functions.https.onRequest((request, response) => {
    cors(request, response, () => {});
    return response.send("Hello from Firebase!");
});

No olvides iniciar los cors como se menciona en el post de apertura:

const cors = require('cors')({origin: true});

Esto puede ser útil. Creé la función de nube HTTP firebase con express (URL personalizada)

const express = require('express');
const bodyParser = require('body-parser');
const cors = require("cors");
const app = express();
const main = express();

app.post('/endpoint', (req, res) => {
    // code here
})

app.use(cors({ origin: true }));
main.use(cors({ origin: true }));
main.use('/api/v1', app);
main.use(bodyParser.json());
main.use(bodyParser.urlencoded({ extended: false }));

module.exports.functionName = functions.https.onRequest(main);

Asegúrese de agregar secciones de reescritura

"rewrites": [
      {
        "source": "/api/v1/**",
        "function": "functionName"
      }
]

Acabo de publicar un pequeño artículo sobre eso:

https://mhaligowski.github.io/blog/2017/03/10/cors-in-cloud-functions.html

En general, debe usar el paquete Express CORS , que requiere un poco de pirateo para cumplir con los requisitos de las funciones GCF / Firebase.

¡Espero que ayude!

Si hay personas como yo: si desea llamar a la función de nube desde el mismo proyecto que la función de nube, puede iniciar el sdk de Firebase y usar el método onCall. Se encargará de todo por ti:

exports.newRequest = functions.https.onCall((data, context) => {
    console.log(`This is the received data: ${data}.`);
    return data;
})

Llame a esta función así:

// Init the firebase SDK first    
const functions = firebase.functions();
const addMessage = functions.httpsCallable(`newRequest`);

Documentos de Firebase: https://firebase.google.com/docs/functions/callable

Si no puede iniciar el SDK, aquí está la esencia de las otras sugerencias:

• Si usa el host Firebase y el host en la ubicación predeterminada, elija reescrituras: https://firebase.google.com/docs/hosting/full-config#rewrites
• O use CORS como sugirió krishnazden: https://stackoverflow.com/a/53845986/1293220

Se encontró una manera de habilitar cors sin importar ninguna biblioteca 'cors'. También funciona Typescripty lo probó en la versión 81.0 de Chrome.

exports.createOrder = functions.https.onRequest((req, res) => {
// browsers like chrome need these headers to be present in response if the api is called from other than its base domain
  res.set("Access-Control-Allow-Origin", "*"); // you can also whitelist a specific domain like "http://127.0.0.1:4000"
  res.set("Access-Control-Allow-Headers", "Content-Type");

  // your code starts here

  //send response
  res.status(200).send();
});

Por si sirve de algo que estaba teniendo el mismo problema cuando se pasa appa onRequest. Me di cuenta de que el problema era una barra diagonal en la url de solicitud para la función firebase. Express estaba buscando '/'pero no tenía la barra inclinada final en la función [project-id].cloudfunctions.net/[function-name]. El error CORS fue un falso negativo. Cuando agregué la barra inclinada final, obtuve la respuesta que esperaba.

Solo así funciona para mí, ya que tengo autorización en mi solicitud:

exports.hello = functions.https.onRequest((request, response) => {
response.set('Access-Control-Allow-Origin', '*');
response.set('Access-Control-Allow-Credentials', 'true'); // vital
if (request.method === 'OPTIONS') {
    // Send response to OPTIONS requests
    response.set('Access-Control-Allow-Methods', 'GET');
    response.set('Access-Control-Allow-Headers', 'Content-Type');
    response.set('Access-Control-Max-Age', '3600');
    response.status(204).send('');
} else {
    const params = request.body;
    const html = 'some html';
    response.send(html)
} )};

Si no puede / no puede usar el complemento cors, llame al setCorsHeaders() función primero en la función del controlador también funcionará.

Utilice también las funciones respondSuccess / Error al responder de nuevo.

const ALLOWED_ORIGINS = ["http://localhost:9090", "https://sub.example.com", "https://example.com"]


// Set CORS headers for preflight requests
function setCorsHeaders (req, res) {
  var originUrl = "http://localhost:9090"


  if(ALLOWED_ORIGINS.includes(req.headers.origin)){
    originUrl = req.headers.origin
  }

  res.set('Access-Control-Allow-Origin', originUrl);
  res.set('Access-Control-Allow-Credentials', 'true');

  if (req.method === 'OPTIONS') {
    // Send response to OPTIONS requests
    res.set('Access-Control-Allow-Methods', 'GET,POST','PUT','DELETE');
    res.set('Access-Control-Allow-Headers', 'Bearer, Content-Type');
    res.set('Access-Control-Max-Age', '3600');
    res.status(204).send('');
  }
}

function respondError (message, error, code, res) {
  var response = {
    message: message,
    error: error
  }
  res.status(code).end(JSON.stringify(response));
}


function respondSuccess (result, res) {
  var response = {
    message: "OK",
    result: result
  }
  res.status(200).end(JSON.stringify(response));
}

Si está probando la aplicación Firebase localmente, entonces necesita señalar funciones en localhostlugar de la nube. Por defecto, firebase serveofirebase emulators:start señala las funciones al servidor en lugar de localhost cuando lo usa en su aplicación web.

Agregue el script a continuación en la cabeza html después del script de inicio de Firebase:

 <script>
      firebase.functions().useFunctionsEmulator('http://localhost:5001')
 </script> 

Asegúrese de eliminar este fragmento al implementar código en el servidor.

Cambiar truepor "*"hizo el truco para mí, así es como se ve:

const cors = require('cors')({ origin: "*" })

Intenté este enfoque porque, en general, así es como se configura este encabezado de respuesta:

'Access-Control-Allow-Origin', '*'

Tenga en cuenta que esto permitirá que cualquier dominio llame a sus puntos finales, por lo tanto, NO es seguro.

Además, puede leer más sobre los documentos: https://github.com/expressjs/cors

Si no está utilizando Express o simplemente desea utilizar CORS. El siguiente código ayudará a resolver

const cors = require('cors')({ origin: true, });   
exports.yourfunction = functions.https.onRequest((request, response) => {  
   return cors(request, response, () => {  
        // *Your code*
    });
});

En mi caso, el error fue causado por la función de nube que invoca el acceso limitado. Agregue allUsers al invocador de funciones en la nube. Por favor, coge el enlace . Consulte el artículo para obtener más información.

Si ninguna de las otras soluciones funciona, puede intentar agregar la siguiente dirección al comienzo de la llamada para habilitar CORS - redirigir:

https://cors-anywhere.herokuapp.com/

Código de muestra con solicitud JQuery AJAX:

$.ajax({
   url: 'https://cors-anywhere.herokuapp.com/https://fir-agilan.web.app/[email protected],
   type: 'GET'
});

Agregando mi experiencia. Pasé horas tratando de encontrar por qué tuve un error CORS.

Sucede que he cambiado el nombre de mi función de nube (la primera que estaba intentando después de una gran actualización).

Entonces, cuando mi aplicación firebase estaba llamando a la función de la nube con un nombre incorrecto, debería haber arrojado un error 404, no un error CORS.

Arreglar el nombre de la función en la nube en mi aplicación firebase solucionó el problema.

He completado un informe de error sobre esto aquí https://firebase.google.com/support/troubleshooter/report/bugs