Axios 和 Wufoo：从 React 发布时“不允许请求标头字段授权”

Posted 2023-03-04

【中文标题】Axios 和 Wufoo：从 React 发布时“不允许请求标头字段授权”

【英文标题】：Axios and Wufoo: 'Request header field authorization is not allowed' when posting from React

【发布时间】：2021-07-23 17:31:19

【问题描述】：

这是我在 *** 上花费数小时梳理类似问题的问题，但似乎无法找到明确的答案。

详情如下：

我正在使用 Axios，在 React 中连接到 Wufoo 以发布新表单 提交； Wufoo 的文档非常糟糕，但需要 基本身份验证； 当我尝试提交我的帖子时（来自 localhost 或通过它构建的 AWS 实例），我得到一个错误 回复：xxx has been blocked by CORS policy: Request header field authorization is not allowed by Access-Control-Allow-Headers in preflight response.

这是我的代码，我显然错误地设置了身份验证方面，但我终其一生都无法弄清楚问题所在。

有人有什么想法吗？

    const wufooSubdomain = 'imgforms';
    const formId = 'abcdefg';
    const formAuth = `Basic xxxxxxxxxxxxxxxx==`;
    const postURL = `https://$wufooSubdomain.wufoo.com/api/v3/forms/$formId/entries.json`;

    axios(
      headers: 
        'Content-Type': 'application/x-www-form-urlencoded',
        Authorization: formAuth,
      ,
      method: 'post',
      url: postURL,
      data: formData,
    ).then((result) => 
      console.warn('1) result is ', result);
    );

【问题讨论】：

API 文档 wufoo.github.io/docs 没有表明该 API 旨在用于在浏览器中运行的前端 javascript。文档中有使用 curl 以及在 php、Ruby 和 Node.js 环境中发出请求的示例，但没有类似的从浏览器中运行的前端代码发出请求的示例。这表明 API 故意不启用 CORS。因此，您的选择是将请求处理移至后端服务器端代码，或者为您的前端代码设置某种 CORS 代理以使请求通过。

@sideshowbarker：谢谢。这与我可悲地得出的结论相同。我已经通过电子邮件向他们澄清，但与此同时，我该写一个代理了..

【参考方案1】：

正如@sideshowbarker 正确指出的那样，Wufoo 文档根本没有演示使用前端来访问他们的 API。可悲的是，他们对我的支持票的回应是：

“我们不支持 API，因为它是高级的”

但是，按照文档并稍微改变技巧，我能够在 Node 中实现一个中间层来处理 AJAX 请求。

【讨论】：

您能否分享一下您提出的“Node 中层”的详细信息？我遇到了与您最初帖子中描述的完全相同的问题，唯一不同的是，我使用的是 Vue/Nuxt。