Wix自定义表单Webhook传数据至Zapier无数据问题求助

我一眼就发现了代码里的两个核心问题，这正是Zapier能收到Webhook但读不到数据的原因：

1. 错误的请求体传递方式 #

你在fetch请求里把body设成了字符串'bodyData'，这意味着你实际发送的不是JSON化的表单数据，而是字面量字符串"bodyData"。Zapier收到这个当然解析不出有效内容。

正确的做法是直接使用变量bodyData，不要加引号：

body: bodyData

2. 缺少必要的请求头 #

发送JSON格式的数据时，必须告诉服务器（这里是Zapier）请求体的类型是JSON，否则服务器会按默认格式解析，导致数据无法识别。你需要在fetch的配置里添加Content-Type请求头：

headers: {
  'Content-Type': 'application/json'
}

修正后的完整代码 #

import {fetch} from 'wix-fetch'; 

export function button1_click(event, $w){ 
  const url = "https://hooks.zapier.com/hooks/catch/2560455/a9eoqe/"; 
  let firstName = $w("#firstName").value; 
  let lastName = $w("#lastName").value; 
  let contactEmail = $w("#contactEmail").value; 
  let contactCompany = $w("#contactCompany").value; 
  let contactNumber = $w("#contactNumber").value; 
  let contactStaffN = $w("#contactStaffN").value; 
  let contactComments = $w("#contactComments").value; 

  let data = {
    "firstName": firstName, 
    "lastName": lastName, 
    "contactEmail": contactEmail, 
    "contactCompany": contactCompany, 
    "contactNumber": contactNumber, 
    "contactStaffN": contactStaffN, 
    "contactComments": contactComments
  }; 

  console.log(data); 
  const bodyData = JSON.stringify(data); 

  fetch(url, {
    method: 'post', 
    body: bodyData, // 移除引号，直接使用变量
    headers: { // 添加Content-Type请求头
      'Content-Type': 'application/json'
    }
  }) 
  .then((httpResponse) => { 
    if(httpResponse.ok){ 
      return httpResponse.json(); 
    } else { 
      return Promise.reject("Fetch did not succeed"); 
    } 
  }) 
  .then(json => { 
    console.log(JSON.stringify(json)); 
    $w("#button1").disable(); 
    $w("#button1").label="Thanks for submitting the data!"; 
  }) 
  .catch(err => console.log(err)); 
}

你可以把这段代码替换原来的版本，再测试一下Webhook发送——Zapier应该就能正常解析到表单里的所有数据了。

内容的提问来源于stack exchange，提问作者Mark Baker