通过POST将Vue.js中的FormData传递到Netlify Lambda，然后传递到CF7 WordPress端

Question

我没有足够的知识来了解http请求格式化数据的所有细节。我试图将FormData从vue.js应用程序发送到netlify无服务器函数(lambda(中，然后将该FormData传递给我的联系表单7 WordPress插件REST API。

我设法使用JSON.stringify将FormData传递给lambda，当我使用JSON.parse时，数据似乎完好无损。然后，我使用节点中的表单数据来构建一个新的FormData对象来传递

然而，我注意到我无法使用客户端方法来控制台日志中的内容

// I get values is not a function
for (var value of formData.values()) {
console.log('>> VALUE = ',value);
}
// I get entries is not a function
for (var pair of formData.entries()) {
console.log(pair[0]+ ', ' + pair[1]); 

这对我来说是一个危险信号，告诉我节点中的FormData可能不会像vue.js代码中的FormData那样处理。。

当我试图用数据访问我的Contact Form 7端点时，我的响应中出现了一个错误，说我的一个或多个字段有错误，尽管我看起来还可以，所以出现了一些问题，但我一直在用头撞墙，试图确定解决方案是什么。

我的直觉告诉我，我还需要做一些事情，格式化数据，或者以联系表格7所期望的方式发送数据。。

在我项目历史的早期，当我在vue.js中运行axios.post(不使用netlify lambda(时，它起作用了，我的联系人表单电子邮件也在发送，所以我知道我用正确的代码/数据达到了正确的终点。

以下是我在这个项目中使用的所有相关代码：

// --------------------------------------------
// in my vue.js component:
// --------------------------------------------
this.bodyFormData = new FormData()
this.bodyFormData.append( 'your-name', this.value_name )
this.bodyFormData.append( 'tel-725', this.value_phone )
this.bodyFormData.append( 'your-email', this.value_email )
this.bodyFormData.append( 'your-subject', this.value_subject )
this.bodyFormData.append( 'your-message', this.value_message )
// (...)
let theFormData = JSON.stringify(Object.fromEntries(this.bodyFormData))
Vue.prototype.$http.post('/.netlify/functions/myfunction',{token:token, formData:theFormData})
// --------------------------------------------
// in my netlify serverless lambda function myfunction.js :
// --------------------------------------------
const axios = require('axios');
const FormData = require('form-data');
const AUTH_API_ENDPOINT = 'https://www.####.com/wp-json/jwt-auth/v1/token/'
const FORM_API_ENDPOINT = 'https://www.####.com/wp-json/contact-form-7/v1/contact-forms/1217/feedback'
const captchaThreshhold = 0.5
exports.handler = async function(event, context) {
const eventBody = JSON.parse(event.body)
const captchaToken = eventBody.token
const stringFormData = eventBody.formData
let parsedFormData = JSON.parse(stringFormData);
console.log('>> parsedFOrmData ', parsedFormData) //logs a JSON object with correct key/value pairs
// logs:
// >> parsedFOrmData  {
//     'your-name': 'Jon Doe',
//     'tel-725': '[phone]',
//     'your-email': '[e-mail]',
//     'your-subject': 'Suuuuubject',
//     'your-message': 'Meeeeesage!'
//   }
let formData = new FormData();
for ( var key in parsedFormData ) {
formData.append(key, parsedFormData[key])
}
// I get values is not a function
for (var value of formData.values()) {
console.log('>> VALUE = ',value);
}
// I get entries is not a function
for (var pair of formData.entries()) {
console.log(pair[0]+ ', ' + pair[1]); 
}
// (...)
axios.post(FORM_API_ENDPOINT, {formData}, {
headers: {
'Authorization': `Bearer ${res.data.token}`,
// 'Content-Type': 'multipart/form-data; charset="utf-8"', //do I need this?
}
})
.then( res => {
console.log('>> response came back from the Form endpoint : ',res)
})
// the res.data I get back form WordPress Contact Form 7 Plugin Endpoint:
data: {
into: '#',
status: 'validation_failed',
message: 'One or more fields have an error. Please check and try again.',
posted_data_hash: '',
invalid_fields: [ [Object], [Object], [Object], [Object] ]
}
//res.config data logs as this:

{"formData":{"_overheadLength":545,"_valueLength":54,"_valuesToMeasure":[],"writable":false,"readable":true,"dataSize":0,"maxDataSize":2097152,"pauseStreams":true,"_released":false,"_streams":["----------------------------611729353459041078880042\r\nContent-Disposition: form-data; name=\"your-name\"\r\n\r\n","Jon Doe",null,"----------------------------611729353459041078880042\r\nContent-Disposition: form-data; name=\"tel-725\"\r\n\r\n","[phone]",null,"----------------------------611729353459041078880042\r\nContent-Disposition: form-data; name=\"your-email\"\r\n\r\n","[e-mail]",null,"----------------------------611729353459041078880042\r\nContent-Disposition: form-data; name=\"your-subject\"\r\n\r\n","Suuuuubject",null,"----------------------------611729353459041078880042\r\nContent-Disposition: form-data; name=\"your-message\"\r\n\r\n","Meeeeesage!",null],"_currentStream":null,"_insideLoop":false,"_pendingNext":false,"_boundary":"--------------------------611729353459041078880042"}}

如果你知道问题出在哪里，请告诉我我做错了什么！谢谢！：(

Answer 1

我解决了这个问题。。。似乎FormData标头需要与数据一起传递。。我在摆弄Postman时偶然发现了答案，并在Node.js代码视图中找到了答案。

对于那些有同样问题的人。。见下文：

axios.post(FORM_API_ENDPOINT, formData, {
headers: {
'Authorization': `Bearer ${res.data.token}`,
'Content-Type': 'multipart/form-data; charset="utf-8"',
...formData.getHeaders() // <--- THIS LINE HERE
}
})