ทะลวง CORS บน Firebase Cloud Functions (HTTPS functions)

พอดีว่ามี Project นึงที่ต้องทำ API โดยใช้ Firebase Cloud Function ครับ ซึ่งทำได้ไม่มีปัญหาครับ แต่ปัญหาคือ ต้องมีการใช้งาน Function ที่สร้างไว้ ผ่านทาง Web ที่อยู่คนละ Domain ด้วย

แต่เหมือนว่าจะเป็นเรื่อง “บุญมีแต่กรรมบัง” ครับ

No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

หลายคนน่าจะเคยโดนปัญหานี้มาแล้ว โดยเฉพาะคนที่ต้องทำ Web ที่ต่อกับ API เยอะๆ เราติดเรื่อง CORS กันครับ

CORS (Cross-origin resource sharing) คือกระบวนการหนึ่งที่คอยควบคุมการใช้ทรัพยากร ที่ถูกเรียกใช้จากคนละ Domain

เรามาดูวิธีแก้ปัญหานี้กันดีกว่าครับ ว่าเราจะทะลวง CORS กันอย่างไรดีบน Firebase Cloud Function ที่เป็น HTTPS function ครับ

แก้ปัญหา CORS ด้วย cors

แนวทางคือ เราจะใช้ Middleware เข้ามาช่วยครับ และใช้ความสามารถของ Package ของ cors ครับ วิธีการไม่ยากครับ เริ่มกันเลย

ติดตั้ง cors

ในขั้นตอนนี้ให้เราติดตั้ง cors ด้วยคำสั่ง ดังนี้ครับ

npm install cors --save

เสร็จแล้วลองดูไฟล์ package.json นะครับ ว่ามี cors โผล่มาหรือยัง

cors เข้ามาอยู่ใน project เราแล้ว

ใช้ cors

ในขั้นตอนนี้ ก็ได้เวลาลง Code กันแล้วครับ ในส่วนแรกเราต้อง init cors ขึ้นมาก่อนนะครับ แล้วใส่ parameter ให้ว่า origin: true นะครับ จากนั้นในส่วน function ให้เราเรียกใช้ cors() แล้วใส่ parameter request, response และ next ตามตัวอย่างดังนี้ครับ

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

exports.hellofirebase = functions.https.onRequest((req, res) => {
  cors((req, res, () => {
    res.send("Hello Firebase Cloud Function!");
  }));
});

เพียงเท่านี้ ปัญหาเรื่อง CORS ก็ไม่เป็นปัญหาอีกต่อไปแล้วครับ 😊

จริงๆแล้วยังมีอีกหลายวิธีที่ทำได้นะครับ เพียงแต่วิธีนี้ใน Doc ของ Firebase เองก็แนะนำมา และยังเป็นวิธีที่ง่ายสุดๆ แล้วครับ

อ้างอิง

Cross-origin resource sharing - Wikipedia

HTTP Triggers | Firebase

cors