使用 next.js 和雲端函數確保安全的 CORS 處理

Question

我在前端使用next.js，有一個「api」資料夾，為我們在next.js伺服器端提供了一個node.js環境。

我們可以在前端和後端（雲端函數）之間擁有一些代理「api」。

1. 從前端端，我向 next.js api 發送請求
2. 從next/api發送請求到雲端函數
3. 在前端取得回應並回傳

結果：得到 CORS

Next.js api代理程式碼：

import { getFunctions, httpsCallable } from 'firebase/functions';

import { firebase } from '@/lib';

export async function deleteUserAccount(userId: string) {
  if (!userId) {
    console.error('deleteUserAccount: no userId provided');
    return;
  }

  try {
    const functions = getFunctions(firebase, 'us-central1');
    const deleteUserData = httpsCallable(functions, 'deleteUserData');

    const { data }: any = await deleteUserData({
      userId,
    });

    console.log('deleteUserAccount', data);
  } catch (error) {
    console.error('deleteUserAccount error', error);
  }
}

這是雲端函數實作：

const admin = require('firebase-admin');
const functions = require('firebase-functions');

exports.deleteUserData = functions.https.onRequest(async (req, res) => {
    const uid = request.auth.uid;
    
    try {
        await admin.auth().deleteUser(uid);
        return { message: 'Data deleted successfully!' };
    } catch (error) {
        console.error('Error deleting user data', error);
        return Promise.reject(error);
    }
});

如何安全地解決CORS？

Answer 1

Firebase 儲存庫在兩個範例中解釋了 cors 的使用。您的問題已在此處得到解答 只需確保您使用此格式即可

{
origin:"https://your-site.name"
}