WordPress表单提交跳转404错误，Duda环境下正常运行

我的网站联系表单在Duda环境下可正常工作，但在WordPress中提交时会跳转至404（页面未找到）错误。已反复检查表单action URL及服务器设置，问题仍未解决。期望表单提交后能返回成功提示，与在Duda中的表现一致。相关前端代码如下：

document.getElementById('MelbourneContact').addEventListener('submit', async (event) => {

   event.preventDefault();

    // Collect form data
   const formData = new FormData(event.target);
   const formObject = {};
  
   formData.forEach((value, key) => {
     formObject[key] = value;
   });

    // Convert to JSON
   const jsonString = JSON.stringify(formObject);

   const myHeaders = new Headers();
   myHeaders.append("Content-Type", "application/json");
   myHeaders.append("Authorization", "Token");
    const requestOptions = {
       method: "POST",
       headers: myHeaders,
       body: jsonString,
       redirect: "follow"
   };

   fetch("https://asteriskapi.website.com/:5001/sendForm", requestOptions)
       .then((response) => response.text())
       .then((result) => console.log(result))
       .catch((error) => console.error(error));
 });

1. 修正Fetch URL格式错误 #

你的请求URL存在明显格式问题：https://asteriskapi.website.com/:5001/sendForm里的斜杠多余了，正确带端口的URL应该是https://asteriskapi.website.com:5001/sendForm（冒号直接跟在域名后，无斜杠）。这个错误在Duda环境可能被兼容，但WordPress环境下会被识别为无效路径，直接导致404。

2. 确保表单默认行为被正确阻止 #

WordPress的编辑器或第三方插件可能干扰event.preventDefault()的执行：

• 检查表单标签的action属性，不要设为#或无效路径，直接留空或设为javascript:void(0)；
• 去掉事件监听的async关键字，异步函数可能导致默认行为未被及时拦截，修改后代码开头如下：

  document.getElementById('MelbourneContact').addEventListener('submit', (event) => {
    event.preventDefault();
    // 后续逻辑保持不变
  });
  

3. 排查WordPress安全机制拦截 #

WordPress的安全插件（如Wordfence）、服务器防火墙或CORS设置可能拦截跨域请求：

• 暂时禁用安全插件测试，若提交正常，再在插件中添加asteriskapi.website.com:5001的白名单；
• 检查API服务器的CORS配置，确保允许你的WordPress站点域名发起POST请求。

4. 添加前端成功/失败提示 #

修复上述问题后，替换原代码中仅控制台输出的逻辑，添加前端可见的提示：

fetch("https://asteriskapi.website.com:5001/sendForm", requestOptions)
  .then((response) => {
    if (!response.ok) throw new Error('请求异常');
    return response.text();
  })
  .then((result) => {
    // 创建成功提示元素
    const successAlert = document.createElement('div');
    successAlert.style.cssText = 'color: green; margin-bottom: 10px;';
    successAlert.textContent = '表单提交成功！';
    event.target.parentNode.insertBefore(successAlert, event.target);
    console.log(result);
  })
  .catch((error) => {
    // 创建失败提示元素
    const errorAlert = document.createElement('div');
    errorAlert.style.cssText = 'color: red; margin-bottom: 10px;';
    errorAlert.textContent = '提交失败，请稍后重试';
    event.target.parentNode.insertBefore(errorAlert, event.target);
    console.error(error);
  });

内容的提问来源于stack exchange，提问作者Wang Bhu