Angular前端调用Contact Form 7 API发邮件失败，返回WordPress页面

我用Angular做前端，后端是无头WordPress，通过Contact Form 7的REST API发送邮件，代码如下：

sendContactEmail(formData: any) {
  return axios.post<any>(
    // [site.com] 是占位符，实际为真实域名
    'https://[site.com]/wp-json/contact-form-7/v1/contact-forms/14/feedback',
    formData,
    {
      headers: {
        'Content-Type': 'multipart/form-data',
      },
    }
  );
}

this.email
  .sendContactEmail(data)
  .then(() => {
    f.reset();
  })
  .catch((e) => {
    console.log('error', e);
  })
  .finally(() => {
    this.isLoading = false;
  });

提交表单后表单会重置，但实际邮件没发送，Network面板的Response里没有JSON响应，只返回了WordPress的HTML页面。已经配置了WP Mail SMTP插件，用Hostinger的SMTP设置完成了测试邮件验证，其他类似案例至少能拿到JSON响应，现在卡壳了。

排查解决步骤 #

• 确认API端点表单ID正确性：登录WordPress后台，查看Contact Forms列表，鼠标悬停在目标表单标题上，URL中post=后的数字就是表单ID，确认代码里的14和实际ID一致。
• 移除手动设置的Content-Type头：axios发送FormData时会自动生成带boundary的正确Content-Type，手动设置会导致WordPress无法解析请求，直接返回HTML。修改代码如下：

  sendContactEmail(formData: any) {
    return axios.post<any>(
      'https://[site.com]/wp-json/contact-form-7/v1/contact-forms/14/feedback',
      formData
      // 删掉手动配置的headers
    );
  }
  

• 验证REST API可用性：直接在浏览器访问https://[site.com]/wp-json/，如果返回的是HTML而非JSON路由列表，说明REST API被禁用或存在插件/主题冲突，需要排查禁用相关插件或切换默认主题测试。
• 配置CORS（跨域场景）：如果Angular前端和WordPress域名不同，需在WordPress的functions.php中添加CORS配置：

  add_action('rest_api_init', function () {
    add_filter('rest_pre_serve_request', function ($value) {
      header('Access-Control-Allow-Origin: 你的Angular域名'); // 生产环境不要用*，指定具体域名
      header('Access-Control-Allow-Methods: GET, POST, OPTIONS');
      header('Access-Control-Allow-Headers: Content-Type');
      return $value;
    });
  });
  

• 检查Contact Form 7版本：确保插件版本在5.2及以上，该版本才开始支持REST API功能，版本过低直接升级即可。
• 查看WordPress错误日志：开启WP_DEBUG模式，在wp-config.php中添加define('WP_DEBUG', true); define('WP_DEBUG_LOG', true);，然后查看wp-content/debug.log，里面会记录表单验证、权限或API调用的具体错误信息。

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