发出多个 Axios 请求导致 CORS 错误

Question

I have a HTTP POST request I'm making from the frontend using Axios to the Firebase Functions backend. I want to be able to send two requests at the same time to call two functions, createEmaileList and zohoCrmHook . The problem is, when I make a request to both functions at the same time, it gives me the CORS error. When I make a request to individual function, they work perfectly fine. How do I make a request to multiple functions at the same time?

Following is the frontend:

const handleSubmit = e => {
    setLoading(true)                
    e.preventDefault()  
    axios.all([
        axios.post(`${ROOT_URL}/createEmailList`, {
            email,
            firstName,
            lastName
        }),
        axios.post(`${ROOT_URL}/zohoCrmHook`, {
            email,
            firstName,
            lastName
        })
    ])
    .then(axios.spread((emailRes, crmRes) => { 
        if(emailRes.status===200 || emailRes.status===204 || crmRes.status===200 || crmRes.status===204 || crmRes.status===201){
            setLoading(false)
            closeModal()
        } 
    }))
    .catch(err=> console.log(err));
}

The backend index.js is as follows:

const functions = require('firebase-functions');
const admin = require("firebase-admin")
const serviceAccount = require("./service_account.json");
const createEmailList = require('./createEmailList')
const zohoCrmHook = require('./zohoCrmHook')

admin.initializeApp({
  credential: admin.credential.cert(serviceAccount),
  databaseURL: "https://landing-page.firebaseio.com"
})

exports.zohoCrmHook = functions.https.onRequest(zohoCrmHook)
exports.createEmailList = functions.https.onRequest(createEmailList)

I've imported the cors module and implemented the function as following, but it still only works individually and not both at the same time

createEmailList.js

const admin = require('firebase-admin')
const cors = require('cors')({ origin: true })

module.exports = (req, res) => {
    cors(req, res, () => {
        if (!req.body.email) {
            return res.status(422).send({ error: 'Bad Input'})
        }

        const email = String(req.body.email)
        const firstName = String(req.body.firstName)
        const lastName = String(req.body.lastName)

        const data = {
            email,
            firstName,
            lastName    
        }

        const db = admin.firestore()
        const docRef = db.collection('users')
            .doc(email)
            .set(data, { merge: false })
            .catch(err => res.status(422).send({ error: err }))

        return res.status(204).end();    
    })
}

zohoCrmHook.js

const axios = require('axios');
const functions = require('firebase-functions');
const cors = require('cors')({ origin: true })

// zoho
const clientId = functions.config().zoho.client_id;
const clientSecret = functions.config().zoho.client_secret;
const refreshToken = functions.config().zoho.refresh_token;
const baseURL = 'https://accounts.zoho.com';

module.exports = (req, res) => {
    cors(req, res, async () => {        
        const newLead = {
            'data': [
            {
                'Email': String(req.body.email),
                'Last_Name': String(req.body.lastName),
                'First_Name': String(req.body.firstName),
            }
            ],
            'trigger': [
                'approval',
                'workflow',
                'blueprint'
            ]
        };

        const { data } = await getAccessToken();
        const accessToken = data.access_token;

        const leads = await getLeads(accessToken);
        const result = checkLeads(leads.data.data, newLead.data[0].Email);

        if (result.length < 1) {
            try {
                return res.json(await createLead(accessToken, newLead));
            } catch (e) {
                console.log("createLead error", e);
            }
        } else {
            return res.json({ message: 'Lead already in CRM' })
        }
    })
}

Update
I've also tried combining the two Firebase Functions into one as following:

exports.myWebHook = functions.https.onRequest(async (req, res) => {
  createEmailList(req, res)
  zohoCrmHook(req, res)
})

and converting the frontend axios request into one:

const handleSubmit = e => {
        setLoading(true)                
        e.preventDefault()  

        axios.post(`${ROOT_URL}/myWebHook`, {
            email,
            firstName,
            lastName
        })
        .then(res => { 
            if(res.status===200 || res.status===204){
                setLoading(false)
                closeModal()
            } 
        })
        .catch(err=> console.log(err));
    }

But, it still gives the same CORS error:

Access to XMLHttpRequest at ' https://us-landing-page.cloudfunctions.net/myWebHook ' from origin ' https://www.website.com ' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: Redirect is not allowed for a preflight request.

Update2
I've tried to incorporating the CORS module in index.js as following and removed the CORS module from both of the functions.

exports.myWebHook = functions.https.onRequest((req, res) => {
  cors(req, res, async () => {            
    zohoCrmHook(req, res)  
    createEmailList(req, res)
  })
})

Now, the axios request to the server doesn't incur any CORS errors and the myWebHook function gets invoked with no issues, but the neither of zohoCrmHook nor createEmailList function gets invoked.

Answer 1

If we look at the code we see that CORS in not only imported but also invoked with an options object. So I think it is instantiating CORS twice and setting multiple times the same CORS headers, which is known to cause issues.

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

My suggestion is, to instantiate CORS once in the entry point and add the functions as resources to the same CORS instance.