无法解决 nuxt 中的 CORS 错误，而 运行 用 firebase 函数编写的 razorpay 函数

Question

我已经安装了 cors 依赖项并在我的代码中使用了它。但是在我的代码中一切正确之后，它仍然给我 cors 错误。这是错误。

错误 1 ​​-

从来源 'http://localhost:3000' 在 'https://us-central1-my-project-name.cloudfunctions.net/createPayment' 获取的访问已被 CORS 策略阻止：所请求的资源上不存在 'Access-Control-Allow-Origin' header。如果不透明的响应满足您的需求，请将请求的模式设置为 'no-cors' 以在禁用 CORS 的情况下获取资源。

错误 2 -

POST https://us-central1-my-project-name.cloudfunctions.net/createPayment net::ERR_FAILED

我不明白我哪里做错了。我正在尝试整合 Razorpay。我的函数是用 Firebase Functions 编写的。

我的index.js文件代码写在functions文件夹里

const functions = require('firebase-functions')
const Razorpay = require('razorpay')
const admin = require('firebase-admin')
const crypto = require('crypto')
const cors = require('cors')({ origin: true })
admin.initializeApp()
//Function to Create Payment
exports.createPayment = functions.https.onRequest(async (req, res) => {
  cors(req, res, () => {
    admin
      .firestore()
      .collection('payments').doc('pay1')
      .add(req.body.data)
      .then((payment) => {
        var instance = new Razorpay({
          key_id: 'rzp_test_qmwfgfdgA',
          key_secret: 'SsKCt8y5Pbfcbf54hg2lsB',
        })

        var options = {
          amount: req.body.data.amount * 100,
          currency: 'INR',
          receipt: payment.id,
          payment_capture: 1,
        }
        instance.orders.create(options, function (err, order) {
          res.status(201).send({ data: order })
        })
      })
  })
})

// Function to Verify Payment

exports.verifyPayment = functions.https.onRequest(async (req, res) => {
  cors(req, res, () => {
    const order = req.body.data

    const text = order.razorpay_order_id + '|' + order.razorpay_payment_id
    var signature = crypto
      .createHmac('sha256', secret_key)
      .update(text)
      .digest('hex')

    if (signature === order.razorpay_signature) {
      res.status(201).send({ data: { message: 'Successfull Payment' } })
    } else {
      res.status(400).send({ data: { message: 'Signature mismatch' } })
    }
  })
})

在组件中的方法中编写函数以从 firebase 函数调用函数。

methods: {
    async pay() {
      const data = {
        amount: 1000,
        name: 'Name',
        email: 'Email',
        phone: 'Phone',
        status: 'pending',
      }
      var createPayment = firebase.functions().httpsCallable('createPayment')
      createPayment(data)
        .then((res) => {
          let order = res.data
          var options = {
            key: 'rzp_test_qmwfgfdgA',
            amount: order.amount_due,
            currency: order.currency,
            description: 'Payment description ',
            order_id: order.id,
            prefill: {
              name: this.data.name,
              email: this.data.email,
              contact: this.data.phone,
            },
            theme: {
              color: '#ffcc00',
            },
            handler: (response) => {
              this.verifySignature(response)
            },
          }
          console.log('Pay')
          var rzp = new Razorpay(options)
          rzp.open()
        })
        .catch((error) => {
          console.log(error)
        })
    },
    async verifySignature(response) {
      const verifyPayment = firebase.functions().httpsCallable('verifyPayment')
      verifyPayment(response)
        .then((res) => {
          alert('payment received')
        })
        .catch((err) => {
          console.log('error')
        })
    },
  },

Answer 1

你搞混了callable and HTTP functions。您已经使用 onRequest 定义了一个 HTTP 函数，但您正试图调用它，就好像它是一个使用 Firebase 客户端 SDK 的可调用函数一样。这是行不通的。

如果您想编写 HTTP 函数，您应该使用标准 HTTP 客户端库从您的应用程序调用它。如果您想使用客户端上的 Firebase SDK 调用的可调用函数，您将需要使用 onCall 声明您的函数，如文档中所述。

请注意，HTTP 和可调用函数具有非常不同的实现。您应该研究文档以确定要使用哪一个，以及如何实现它。