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

Question

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

我设法使用 JSON.stringify 将我的 FormData 传递给我的 lambda，当我使用 JSON.parse 时，数据似乎是完整的。然后我在节点中使用 form-data 来构建一个新的 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 端点时，我在回复中收到错误消息，指出我的一个或多个字段有错误，即使在我看来似乎没问题，所以出现了问题，但我一直在想办法确定解决方案是什么。

我的直觉告诉我，我仍然需要做一些事情来格式化数据，或者以 Contact Form 7 所期望的方式发送数据..

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

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

// --------------------------------------------
// 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': '(555) 555-5555',
    //     'your-email': 'jon@doe.com',
    //     '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","(555) 555-5555",null,"----------------------------611729353459041078880042\\r\\nContent-Disposition: form-data; name=\\"your-email\\"\\r\\n\\r\\n","jon@doe.com",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
                    }
                })