Gestion sécurisée du CORS à l'aide de next.js et des fonctions cloud

Question

J'utilise next.js sur le front-end et j'ai un dossier "api" qui nous fournit un environnement node.js côté serveur next.js.

Nous pouvons avoir des "api" proxy entre le frontend et le backend (fonctions cloud).

1. Depuis le frontend, j'envoie une requête à l'api next.js
2. Envoyer la demande de next/api à la fonction cloud
3. Obtenez la réponse dès le début et renvoyez-la

Résultat : obtenu CORS

Code proxy de l'API Next.js :

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

Voici l'implémentation de la fonction cloud :

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

Comment résoudre CORS en toute sécurité ?

Answer 1

Le référentiel Firebase explique l'utilisation des cors dans deux exemples. Votre question a trouvé une réponse ici Assurez-vous simplement d'utiliser ce format

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