Abilitazione di CORS nelle funzioni cloud per Firebase

Attualmente sto imparando come utilizzare le nuove funzioni cloud per Firebase e il problema che sto riscontrando è che non riesco ad accedere alla funzione che ho scritto tramite una richiesta AJAX. Ottengo l'errore "No 'Access-Control-Allow-Origin'". Ecco un esempio della funzione che ho scritto:

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

La funzione si trova in questo URL: https://us-central1-fba-shipper-140ae.cloudfunctions.net/test

I documenti di Firebase suggeriscono di aggiungere il middleware CORS all'interno della funzione, l'ho provato ma non funziona per me: https://firebase.google.com/docs/functions/http-events

Ecco come l'ho fatto:

var cors = require('cors');    

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

Che cosa sto facendo di sbagliato? Gradirei qualsiasi aiuto con questo.

AGGIORNARE:

La risposta di Doug Stevenson ha aiutato. Aggiungendo ({origin: true}) il problema è stato risolto, dovevo anche passare response.status(500)a quello response.status(200)che all'inizio mi mancava completamente.

Esistono due funzioni di esempio fornite dal team di Firebase che dimostrano l'uso di CORS:

• Time server con formattazione della data
• Endpoint HTTPS che richiede autenticazione

Il secondo esempio utilizza un modo diverso di lavorare con cors rispetto a quello attualmente in uso.

Inoltre, considera l'importazione in questo modo, come mostrato negli esempi:

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

È possibile impostare CORS nella funzione cloud in questo modo

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

Non è necessario importare il corspacchetto

Per chiunque cerchi di farlo in Typescript questo è il codice:

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

Un'ulteriore informazione, solo per il gusto di chi cerca su Google dopo un po 'di tempo: se stai usando l'hosting firebase, puoi anche impostare riscritture, in modo che ad esempio un url come (firebase_hosting_host) / api / myfunction reindirizzi a ( firebase_cloudfunctions_host) / doStuff. In questo modo, poiché il reindirizzamento è trasparente e lato server, non è necessario gestire cors.

Puoi configurarlo con una sezione di riscrittura in firebase.json:

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

Nessuna soluzione CORS ha funzionato per me ... fino ad ora!

Non sono sicuro che qualcun altro abbia riscontrato lo stesso problema, ma ho impostato CORS in 5 modi diversi dagli esempi che ho trovato e nulla sembrava funzionare. Ho creato un esempio minimo con Plunker per vedere se si trattava davvero di un bug, ma l'esempio ha funzionato magnificamente. Ho deciso di controllare i registri delle funzioni di firebase (trovati nella console di firebase) per vedere se questo potesse dirmi qualcosa. Ho avuto un paio di errori nel mio codice del server nodo , non correlato a CORS , che quando ho eseguito il debug mi ha rilasciato il mio messaggio di errore CORS . Non so perché gli errori di codice non correlati a CORS restituiscano una risposta di errore CORS, ma mi ha portato nella tana del coniglio sbagliata per un buon numero di ore ...

tl; dr - controlla i log delle tue funzioni firebase se nessuna soluzione CORS funziona e esegui il debug di eventuali errori

Ho una piccola aggiunta alla risposta di @Andreys alla sua stessa domanda.

Sembra che non devi chiamare il callback nella cors(req, res, cb)funzione, quindi puoi semplicemente chiamare il modulo cors nella parte superiore della tua funzione, senza incorporare tutto il tuo codice nel callback. Questo è molto più veloce se vuoi implementare cors dopo.

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

Non dimenticare di avviare cors come indicato nel post di apertura:

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

Questo potrebbe essere utile. Ho creato la funzione cloud HTTP firebase con express (URL personalizzato)

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

Assicurati di aver aggiunto sezioni di riscrittura

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

Ho appena pubblicato un piccolo pezzo su questo:

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

Generalmente, dovresti usare il pacchetto Express CORS , che richiede un po 'di hacking per soddisfare i requisiti delle funzioni GCF / Firebase.

Spero che aiuti!

Se ci sono persone come me là fuori: Se vuoi chiamare la funzione cloud dallo stesso progetto della funzione cloud stessa, puoi avviare firebase sdk e usare il metodo onCall. Gestirà tutto per te:

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

Chiamare questa funzione in questo modo:

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

Documenti Firebase: https://firebase.google.com/docs/functions/callable

Se non riesci ad avviare l'SDK, ecco l'essenza degli altri suggerimenti:

• Se usi l'hosting e l'host Firebase nella posizione predefinita, scegli riscrivi: https://firebase.google.com/docs/hosting/full-config#rewrites
• Oppure utilizza CORS come suggerito da krishnazden: https://stackoverflow.com/a/53845986/1293220

Trovato un modo per abilitare cors senza importare alcuna libreria "cors". Funziona anche con Typescripte testato nella versione 81.0 di 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();
});

Per quel che vale ho avuto lo stesso problema quando passa appin onRequest. Mi sono reso conto che il problema era una barra finale dell'URL della richiesta per la funzione Firebase. Express cercava '/'ma non avevo la barra finale della funzione [project-id].cloudfunctions.net/[function-name]. L'errore CORS era un falso negativo. Quando ho aggiunto la barra finale, ho ottenuto la risposta che mi aspettavo.

Solo in questo modo funziona per me poiché ho l'autorizzazione nella mia richiesta:

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

Se non si utilizza / non è possibile utilizzare il plug-in cors, anche la chiamata della setCorsHeaders()funzione prima nella funzione gestore funzionerà.

Utilizzare anche le funzioni respondSuccess / Error quando si risponde.

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

Se stai testando l'app Firebase localmente, devi puntare alle funzioni localhostanziché al cloud. Per impostazione predefinita, firebase serveo firebase emulators:startpunta le funzioni al server anziché a localhost quando lo si utilizza nella propria app Web.

Aggiungi lo script seguente in testa html dopo lo script init di firebase:

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

Assicurati di rimuovere questo frammento durante la distribuzione del codice sul server.

Cambiando truedal "*"fatto il trucco per me, quindi questo è come sembra:

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

Ho provato questo approccio perché, in generale, è impostato questo header di risposta:

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

Tenere presente che ciò consentirà a qualsiasi dominio di chiamare gli endpoint, pertanto NON è sicuro.

Inoltre, puoi leggere di più sui documenti: https://github.com/expressjs/cors

Se non si utilizza Express o si desidera semplicemente utilizzare CORS. Il seguente codice aiuterà a risolvere

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

Nel mio caso l'errore è stato causato dall'accesso al limite di invoker della funzione cloud. Aggiungi tutti gli utenti all'invocatore di funzioni cloud. Si prega di prendere il collegamento . Per ulteriori informazioni, consultare l' articolo

Se nessuna delle altre soluzioni funziona, puoi provare ad aggiungere l'indirizzo sotto all'inizio della chiamata per abilitare CORS - reindirizzamento:

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

Codice di esempio con richiesta JQuery AJAX:

$.ajax({
   url: 'https://cors-anywhere.herokuapp.com/https://fir-agilan.web.app/gmail?mail=asd@gmail.com,
   type: 'GET'
});

Aggiungendo la mia esperienza. Ho passato ore a cercare di scoprire perché avevo un errore CORS.

Succede che ho rinominato la mia funzione cloud (il primo che stavo provando dopo un grande aggiornamento).

Quindi, quando la mia app firebase stava chiamando la funzione cloud con un nome errato, avrebbe dovuto generare un errore 404, non un errore CORS.

La correzione del nome della funzione cloud nella mia app firebase ha risolto il problema.

Ho compilato una segnalazione di bug al riguardo qui https://firebase.google.com/support/troubleshooter/report/bugs