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);
});
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:
However, following the documentation and changing tact slightly I was able to implement a middle-tier in Node to handle the AJAX request.