How to avoid CORS on secure way with next.js and cloud functions?

Question

I am using next.js on the frontend side, there is "api" folder that gives us a node.js environment on the next.js server side.

There we can have some proxy "api" between frontend and backend (cloud functions).

1. From frontend side I send request on next.js api
2. From next/api sending request to cloud function
3. Take response and return on frontend side

Result: Got CORS

Next.js api proxy code:

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

This is cloud function implementation:

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

How to solve CORS in a secure way?

Answer 1

The firebase repository explaining the use of cors in two of their examples. Your question is answered here Just make sure you use this format

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