การเปิดใช้งาน CORS ใน Cloud Functions สำหรับ Firebase

ฉันกำลังเรียนรู้วิธีใช้ฟังก์ชันระบบคลาวด์ใหม่สำหรับ Firebase และปัญหาที่พบคือฉันไม่สามารถเข้าถึงฟังก์ชันที่ฉันเขียนผ่านคำขอ AJAX ได้ ฉันได้รับข้อผิดพลาด "No" Access-Control-Allow-Origin " นี่คือตัวอย่างของฟังก์ชันที่ฉันเขียน:

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

ฟังก์ชันอยู่ใน url นี้: https://us-central1-fba-shipper-140ae.cloudfunctions.net/test

เอกสาร Firebase แนะนำให้เพิ่มมิดเดิลแวร์ CORS ภายในฟังก์ชันนี้ฉันได้ลองใช้แล้ว แต่ไม่ได้ผลสำหรับฉัน: https://firebase.google.com/docs/functions/http-events

นี่คือวิธีที่ฉันทำ:

var cors = require('cors');    

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

ผมทำอะไรผิดหรือเปล่า? ฉันขอขอบคุณสำหรับความช่วยเหลือใด ๆ ในเรื่องนี้

UPDATE:

คำตอบของDoug Stevensonช่วยได้ เพิ่ม ({กำเนิด: จริง}) แก้ไขปัญหาที่ฉันยังมีการเปลี่ยนแปลงresponse.status(500)ไปresponse.status(200)ซึ่งผมสมบูรณ์พลาดในตอนแรก

มีฟังก์ชั่นตัวอย่างสองรายการที่จัดเตรียมโดยทีม Firebase ซึ่งสาธิตการใช้ CORS:

• เซิร์ฟเวอร์เวลาพร้อมการจัดรูปแบบวันที่
• ปลายทาง HTTPS ต้องการการตรวจสอบสิทธิ์

ตัวอย่างที่สองใช้วิธีการทำงานกับ cors แตกต่างจากที่คุณใช้อยู่ในปัจจุบัน

นอกจากนี้ให้พิจารณาการนำเข้าเช่นนี้ดังที่แสดงในตัวอย่าง:

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

คุณสามารถตั้งค่า CORS ในฟังก์ชันคลาวด์ได้เช่นนี้

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

ไม่ต้องนำเข้าcorsแพ็คเกจ

สำหรับใครก็ตามที่พยายามทำสิ่งนี้ใน typescript นี่คือรหัส:

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

ข้อมูลเพิ่มเติมอีกหนึ่งส่วนเพื่อประโยชน์ของ googling เหล่านี้หลังจากผ่านไประยะหนึ่ง: หากคุณใช้โฮสติ้ง firebase คุณยังสามารถตั้งค่าการเขียนซ้ำได้เพื่อให้ตัวอย่างเช่น url เช่น (firebase_hosting_host) / api / myfunction เปลี่ยนเส้นทางไปยัง ( firebase_cloudfunctions_host) / ฟังก์ชัน doStuff ด้วยวิธีนี้เนื่องจากการเปลี่ยนเส้นทางเป็นแบบโปร่งใสและฝั่งเซิร์ฟเวอร์คุณจึงไม่ต้องจัดการกับ cors

คุณสามารถตั้งค่าได้ด้วยส่วนการเขียนซ้ำใน firebase.json:

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

ไม่มีโซลูชัน CORS ที่เหมาะกับฉัน ... จนถึงตอนนี้!

ไม่แน่ใจว่ามีใครประสบปัญหาเดียวกันกับฉันหรือไม่ แต่ฉันตั้งค่า CORS เหมือน 5 วิธีที่แตกต่างจากตัวอย่างที่ฉันพบและดูเหมือนจะไม่มีอะไรได้ผล ฉันสร้างตัวอย่างเล็ก ๆ น้อย ๆ ด้วย Plunker เพื่อดูว่ามันเป็นบั๊กจริง ๆ หรือไม่ แต่ตัวอย่างก็ทำงานได้อย่างสวยงาม ฉันตัดสินใจตรวจสอบบันทึกฟังก์ชัน firebase (พบในคอนโซล firebase) เพื่อดูว่าสามารถบอกอะไรฉันได้หรือไม่ ผมมีข้อผิดพลาดคู่ในรหัสเซิร์ฟเวอร์โหนดของฉัน , ไม่ Cors ที่เกี่ยวข้องว่าเมื่อฉันบั๊กการปล่อยตัวฉันของข้อผิดพลาดล ธ ของฉัน ฉันไม่รู้ว่าทำไมข้อผิดพลาดของรหัสที่ไม่เกี่ยวข้องกับ CORS ส่งคืนการตอบสนองข้อผิดพลาด CORS แต่มันทำให้ฉันลงรูกระต่ายที่ไม่ถูกต้องเป็นเวลาหลายชั่วโมง ...

tl; dr - ตรวจสอบบันทึกฟังก์ชัน firebase ของคุณหากไม่มีโซลูชัน CORS ทำงานและแก้ไขข้อผิดพลาดใด ๆ ที่คุณมี

ฉันมีส่วนเพิ่มเติมเล็กน้อยที่ @Andreys ตอบคำถามของเขาเอง

ดูเหมือนว่าคุณไม่จำเป็นต้องโทรกลับในcors(req, res, cb)ฟังก์ชันดังนั้นคุณสามารถเรียกใช้โมดูล cors ที่ด้านบนสุดของฟังก์ชันของคุณได้โดยไม่ต้องฝังโค้ดทั้งหมดของคุณในการโทรกลับ วิธีนี้เร็วกว่ามากหากคุณต้องการใช้ cors ในภายหลัง

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

อย่าลืมเริ่มต้น cors ตามที่ระบุไว้ในโพสต์เปิด:

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

สิ่งนี้อาจเป็นประโยชน์ ฉันสร้างฟังก์ชันคลาวด์ firebase HTTP ด้วย Express (URL ที่กำหนดเอง)

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

โปรดตรวจสอบว่าคุณได้เพิ่มส่วนการเขียนซ้ำแล้ว

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

ฉันเพิ่งเผยแพร่ชิ้นส่วนเล็ก ๆ เกี่ยวกับเรื่องนี้:

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

โดยทั่วไปคุณควรใช้แพ็คเกจ Express CORSซึ่งต้องใช้การแฮ็กเล็กน้อยเพื่อให้เป็นไปตามข้อกำหนดในฟังก์ชัน GCF / Firebase

หวังว่าจะช่วยได้!

หากมีคนอย่างฉันอยู่ที่นั่น: หากคุณต้องการเรียกใช้ฟังก์ชันคลาวด์จากโปรเจ็กต์เดียวกับฟังก์ชันคลาวด์ด้วยตัวเองคุณสามารถเริ่มต้น firebase sdk และใช้เมธอด onCall จะจัดการทุกอย่างให้คุณ:

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

เรียกฟังก์ชันนี้ว่า:

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

เอกสาร Firebase: https://firebase.google.com/docs/functions/callable

หากคุณไม่สามารถเริ่มต้น SDK นี่คือสาระสำคัญจากคำแนะนำอื่น ๆ :

• หากคุณใช้โฮสติ้ง firebase และโฮสต์ในตำแหน่งเริ่มต้นให้เลือกเขียนซ้ำ: https://firebase.google.com/docs/hosting/full-config#rewrites
• หรือใช้ CORS เช่น krishnazden แนะนำ: https://stackoverflow.com/a/53845986/1293220

พบวิธีเปิดใช้งาน cors โดยไม่ต้องนำเข้าไลบรารี 'cors' ใด ๆ นอกจากนี้ยังใช้งานได้Typescriptและทดสอบใน Chrome เวอร์ชัน 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();
});

สำหรับสิ่งที่คุ้มค่าผมมีปัญหาเดียวกันเมื่อผ่านเข้าไปในapp onRequestฉันตระหนักว่าปัญหาคือเครื่องหมายทับบน URL คำขอสำหรับฟังก์ชัน firebase เอ็กซ์เพรสกำลังมองหาแต่ฉันไม่ได้มีเฉือนท้ายในฟังก์ชั่น'/' [project-id].cloudfunctions.net/[function-name]ข้อผิดพลาด CORS เป็นค่าลบเท็จ เมื่อฉันเพิ่มเครื่องหมายทับฉันได้รับการตอบสนองที่ฉันคาดหวัง

วิธีนี้เท่านั้นที่ใช้ได้ผลสำหรับฉันเนื่องจากฉันได้รับอนุญาตในคำขอของฉัน:

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

หากคุณไม่ / ไม่สามารถใช้ปลั๊กอิน cors ได้การเรียกใช้setCorsHeaders()ฟังก์ชันสิ่งแรกในฟังก์ชันตัวจัดการก็จะใช้ได้เช่นกัน

ใช้ฟังก์ชัน responseSuccess / Error เมื่อตอบกลับ

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

หากคุณกำลังทดสอบแอป firebase ในเครื่องคุณต้องชี้ฟังก์ชันไปที่localhostแทนที่จะเป็นระบบคลาวด์ ตามค่าเริ่มต้นfirebase serveหรือfirebase emulators:startชี้ฟังก์ชันไปที่เซิร์ฟเวอร์แทนที่จะเป็น localhost เมื่อคุณใช้งานบนเว็บแอปของคุณ

เพิ่มสคริปต์ด้านล่างในส่วนหัว html หลังสคริปต์เริ่มต้นของ firebase:

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

อย่าลืมลบข้อมูลโค้ดนี้ออกเมื่อปรับใช้โค้ดกับเซิร์ฟเวอร์

การเปลี่ยนแปลงtrueโดย"*"ไม่เคล็ดลับสำหรับฉันดังนั้นนี้เป็นวิธีที่ดูเหมือนว่า:

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

ฉันลองใช้วิธีนี้เพราะโดยทั่วไปนี่คือวิธีตั้งค่าส่วนหัวการตอบกลับนี้:

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

โปรดทราบว่าการดำเนินการนี้จะทำให้โดเมนใด ๆ เรียกใช้ปลายทางของคุณได้ดังนั้นจึงไม่ปลอดภัย

นอกจากนี้คุณสามารถอ่านเพิ่มเติมเกี่ยวกับเอกสาร: https://github.com/expressjs/cors

หากคุณไม่ได้ใช้ Express หรือเพียงแค่ต้องการใช้ CORS รหัสต่อไปนี้จะช่วยแก้ไข

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

ในกรณีของฉันข้อผิดพลาดเกิดจากการเข้าถึงขีด จำกัด ผู้เรียกใช้ฟังก์ชันคลาวด์ โปรดเพิ่ม allUsers ในผู้เรียกใช้ฟังก์ชันคลาวด์ โปรดจับการเชื่อมโยง โปรดดูบทความสำหรับข้อมูลเพิ่มเติม

หากวิธีแก้ปัญหาอื่น ๆ ไม่ได้ผลคุณสามารถลองเพิ่มที่อยู่ด้านล่างที่จุดเริ่มต้นของการโทรเพื่อเปิดใช้งาน CORS - เปลี่ยนเส้นทาง:

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

โค้ดตัวอย่างพร้อมคำขอ JQuery AJAX:

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

เพิ่มประสบการณ์ของฉัน ฉันใช้เวลาหลายชั่วโมงในการพยายามค้นหาสาเหตุที่ฉันมีข้อผิดพลาด CORS

เกิดขึ้นเมื่อฉันเปลี่ยนชื่อฟังก์ชันคลาวด์ของฉัน (ครั้งแรกที่ฉันพยายามหลังจากอัปเกรดครั้งใหญ่)

ดังนั้นเมื่อแอป firebase ของฉันเรียกใช้ฟังก์ชันคลาวด์ด้วยชื่อที่ไม่ถูกต้องมันควรมีข้อผิดพลาด 404 ไม่ใช่ข้อผิดพลาด CORS

การแก้ไขชื่อฟังก์ชันระบบคลาวด์ในแอป firebase ของฉันช่วยแก้ปัญหาได้

ฉันได้กรอกรายงานข้อบกพร่องที่นี่แล้ว https://firebase.google.com/support/troubleshooter/report/bugs