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

Question

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

错误1-

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

错误2-

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

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

我的index.js文件代码写在函数文件夹中。

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

您将可调用函数和HTTP函数混合在一起。您已经使用onRequest定义了一个HTTP函数，但您试图调用它，就好像它是一个使用Firebase客户端SDK的可调用函数一样。这是行不通的。

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

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