Mengaktifkan CORS di Fungsi Awan untuk Firebase

Saat ini saya sedang belajar cara menggunakan Cloud Functions untuk Firebase dan masalah yang saya alami adalah bahwa saya tidak dapat mengakses fungsi yang saya tulis melalui permintaan AJAX. Saya mendapatkan kesalahan "Tidak Ada 'Akses-Kontrol-Izinkan-Asal'". Berikut ini contoh fungsi yang saya tulis:

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

Fungsi duduk di url ini: https://us-central1-fba-shipper-140ae.cloudfunctions.net/test

Firebase docs menyarankan untuk menambahkan CORS middleware di dalam fungsi, saya sudah mencobanya tetapi tidak berfungsi untuk saya: https://firebase.google.com/docs/functions/http-events

Beginilah cara saya melakukannya:

var cors = require('cors');    

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

Apa yang saya lakukan salah? Saya akan menghargai bantuan apa pun dengan ini.

MEMPERBARUI:

Jawaban Doug Stevenson membantu. Menambahkan ({asal: true}) tetap masalah, saya juga harus berubah response.status(500)untuk response.status(200)yang saya benar-benar ketinggalan pada awalnya.

Ada dua fungsi sampel yang disediakan oleh tim Firebase yang menunjukkan penggunaan CORS:

• Server waktu dengan format tanggal
• Titik akhir HTTPS yang membutuhkan Otentikasi

Sampel kedua menggunakan cara kerja yang berbeda dengan kor daripada yang Anda gunakan saat ini.

Juga, pertimbangkan mengimpor seperti ini, seperti yang ditunjukkan dalam sampel:

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

Anda dapat mengatur CORS dalam fungsi cloud seperti ini

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

Tidak perlu mengimpor corspaket

Bagi siapa pun yang mencoba melakukan ini dalam naskah, ini adalah kode:

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

Satu info tambahan, hanya demi orang-orang yang googling ini setelah beberapa waktu: Jika Anda menggunakan hosting berbasis web, Anda juga dapat mengatur penulisan ulang, sehingga misalnya url seperti (firebase_hosting_host) / api / myfunction redirect ke ( firebase_cloudfunctions_host) / fungsi doStuff. Dengan begitu, karena pengalihan transparan dan sisi-server, Anda tidak harus berurusan dengan cors.

Anda dapat mengaturnya dengan bagian penulisan ulang di firebase.json:

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

Tidak ada solusi CORS yang bekerja untuk saya ... sampai sekarang!

Tidak yakin apakah ada orang lain yang mengalami masalah yang sama dengan saya, tetapi saya mengatur CORS seperti 5 cara berbeda dari contoh yang saya temukan dan sepertinya tidak ada yang berhasil. Saya membuat contoh minimal dengan Plunker untuk melihat apakah itu benar-benar bug, tetapi contohnya berjalan dengan indah. Saya memutuskan untuk memeriksa log fungsi firebase (ditemukan di konsol firebase) untuk melihat apakah itu dapat memberi tahu saya apa pun. Saya memiliki beberapa kesalahan dalam kode server node saya , tidak terkait dengan CORS , bahwa ketika saya debug membebaskan saya dari pesan kesalahan CORS saya . Saya tidak tahu mengapa kesalahan kode yang tidak terkait dengan CORS mengembalikan respons kesalahan CORS, tetapi hal itu membuat saya jatuh ke lubang kelinci yang salah selama beberapa jam ...

tl; dr - periksa log fungsi firebase Anda jika tidak ada solusi CORS yang berfungsi dan debug setiap kesalahan yang Anda miliki

Saya punya sedikit tambahan untuk @Andreys menjawab pertanyaannya sendiri.

Tampaknya Anda tidak perlu memanggil fungsi panggil balik dalam cors(req, res, cb)fungsi, jadi Anda bisa memanggil modul kors di bagian atas fungsi Anda, tanpa menyematkan semua kode Anda dalam panggilan balik. Ini jauh lebih cepat jika Anda ingin menerapkan kor setelahnya.

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

Jangan lupa untuk inor kors seperti yang disebutkan dalam posting pembukaan:

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

Ini mungkin bermanfaat. Saya membuat fungsi cloud HTTP firebase dengan express (URL khusus)

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

Pastikan Anda menambahkan bagian menulis ulang

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

Saya baru saja menerbitkan sedikit tentang itu:

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

Secara umum, Anda harus menggunakan paket Express CORS , yang memerlukan sedikit peretasan untuk memenuhi persyaratan dalam Fungsi GCF / Firebase.

Semoga itu bisa membantu!

Jika ada orang seperti saya di luar sana: Jika Anda ingin memanggil fungsi cloud dari proyek yang sama dengan fungsi cloud itu sendiri, Anda dapat init firebase sdk dan gunakan metode onCall. Ini akan menangani segalanya untuk Anda:

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

Sebut fungsi ini seperti ini:

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

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

Jika Anda tidak dapat menginisialisasi SDK di sini adalah esensi dari saran lain:

• Jika Anda menggunakan hosting dan host firebase di lokasi default, pilih penulisan ulang: https://firebase.google.com/docs/hosting/full-config#rewrites
• Atau gunakan CORS seperti yang disarankan krishnazden: https://stackoverflow.com/a/53845986/1293220

Menemukan cara untuk mengaktifkan kor tanpa mengimpor perpustakaan 'kor'. Ini juga berfungsi dengan Typescriptdan mengujinya di chrome versi 81.0.

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

Untuk apa layak itu aku sedang mengalami masalah yang sama ketika melewati appke dalam onRequest. Saya menyadari bahwa masalahnya adalah garis miring pada url permintaan untuk fungsi firebase. Express sedang mencari '/'tetapi saya tidak memiliki garis miring pada fungsi [project-id].cloudfunctions.net/[function-name]. Kesalahan CORS adalah negatif palsu. Ketika saya menambahkan garis miring, saya mendapat respons yang saya harapkan.

Hanya cara ini yang berfungsi untuk saya karena saya memiliki otorisasi dalam permintaan saya:

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

Jika Anda tidak / tidak bisa menggunakan plugin cors, panggil setCorsHeaders() fungsi hal pertama dalam fungsi handler juga akan berfungsi.

Juga gunakan fungsi respondSuccess / Error saat membalas kembali.

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

Jika Anda menguji aplikasi firebase secara lokal, maka Anda perlu mengarahkan fungsi ke localhostbukan cloud. Secara default, firebase serveatau firebase emulators:startarahkan fungsi ke server alih-alih localhost saat Anda menggunakannya di aplikasi web Anda.

Tambahkan skrip di bawah dalam kepala html setelah skrip firebase init:

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

Pastikan untuk menghapus cuplikan ini saat menggunakan kode ke server.

Mengubah truedengan "*"melakukan trik untuk saya, jadi seperti ini tampilannya:

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

Saya mencoba pendekatan ini karena secara umum, ini adalah bagaimana header respons ini diatur:

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

Ketahuilah bahwa ini akan memungkinkan domain apa pun untuk memanggil titik akhir Anda karena itu TIDAK aman.

Selain itu, Anda dapat membaca lebih lanjut di dokumen: https://github.com/expressjs/cors

Jika Anda tidak menggunakan Express atau hanya ingin menggunakan CORS. Kode berikut akan membantu menyelesaikannya

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

Dalam kasus saya kesalahan itu disebabkan oleh akses batas fungsi cloud invoker. Silakan tambahkan semua Pengguna ke penyerang fungsi cloud. Harap tautkan tautan . Silakan merujuk ke artikel untuk info lebih lanjut

Jika tidak ada solusi lain yang berfungsi, Anda dapat mencoba menambahkan alamat di bawah ini di awal panggilan untuk mengaktifkan CORS - redirect:

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

Kode sampel dengan permintaan JQuery AJAX:

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

Menambahkan pengalaman saya. Saya menghabiskan waktu berjam-jam untuk menemukan mengapa saya memiliki kesalahan CORS.

Kebetulan saya mengganti nama fungsi cloud saya (yang pertama saya coba setelah upgrade besar).

Jadi, ketika aplikasi firebase saya memanggil fungsi cloud dengan nama yang salah, seharusnya dilempar kesalahan 404, bukan kesalahan CORS.

Memperbaiki nama fungsi cloud di aplikasi firebase saya memperbaiki masalah ini.

Saya telah mengisi laporan bug tentang ini di sini https://firebase.google.com/support/troubleshooter/report/bugs