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

Question

我使用 Axios 从前端向 Firebase Functions 后端发出 HTTP POST 请求。我希望能够同时发送两个请求来调用两个函数，createEmaileList 和zohoCrmHook。问题是，当我同时向这两个函数发出请求时，它给了我 CORS 错误。当我向单个功能提出请求时，它们工作得很好。如何同时向多个函数发出请求？

下面是前端：

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

后台index.js如下：

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)

我已经导入了cors 模块并实现了如下功能，但它仍然只能单独工作，不能同时工作

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

更新
我还尝试将这两个 Firebase 函数合二为一，如下所示：

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

并将前端axios 请求合二为一：

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

但是，它仍然给出相同的 CORS 错误：

访问 XMLHttpRequest 在 'https://us-landing-page.cloudfunctions.net/myWebHook' 来自原点 'https://www.website.com' 已被 CORS 阻止 策略：对预检请求的响应未通过访问控制 检查：预检请求不允许重定向。

更新2
我尝试将 CORS 模块合并到 index.js 中，如下所示，并从这两个函数中删除了 CORS 模块。

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

现在，对服务器的axios 请求不会引发任何CORS 错误，并且myWebHook 函数被调用没有问题，但zohoCrmHook 和createEmailList 函数都没有被调用。

Answer 1

如果我们查看代码，我们会看到 CORS 不仅被导入，而且还被选项对象调用。所以我认为它两次实例化 CORS 并多次设置相同的 CORS 标头，这会导致问题。

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

我的建议是，在入口点实例化一次 CORS，并将函数作为资源添加到同一个 CORS 实例。