[SOLVED] Axios and Wufoo: 'Request header field authorization is not allowed' when posting from React

Axios and Wufoo: 'Request header field authorization is not allowed' when posting from React

It's a problem that I've spent hours combing through similar questions here on StackOverflow, but can't seem to find a definitive answer to.

The details are:

I'm using Axios, in React to connect to Wufoo to post a new form submission;
Wufoo's documentation is legendarily poor, but requires Basic authentication;
When I attempt to submit my post (either from localhost or via the AWS instance it builds on), I get an error response: xxx has been blocked by CORS policy: Request header field authorization is not allowed by Access-Control-Allow-Headers in preflight response.

Here's my code, I'm clearly setting up the authentication side of things incorrectly, but cannot for the life of me work out what the issue is.

Does anybody have any ideas?

    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);
    });

Solution

As @sideshowbarker correctly pointed out, the Wufoo docs don't demonstrate using the front-end to access their API at all. Sadly their response to my support ticket was:

"We don't support the API because it is advanced"

However, following the documentation and changing tact slightly I was able to implement a middle-tier in Node to handle the AJAX request.