No CORS error with form but CORS error when making axios post request

Question

I was trying to post some form to backend and wanted to do with axios request, but I get cors error with axios. If I do post request with regular <form> it works.

This is my send async function

const formData = new FormData();
formData.append('access_token', '0bf6fe96-3510-4105-ac4c-2656f1f14579');
formData.append('access_token_ttl', '10000000000000000000000000');
const res = await axios.post('myurl', formData, {
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded',
  },
});

This is form that works

<form action="myurl" method="post" target="_blank">
      <input name="access_token" value="0bf6fe96-3510-4105-ac4c-2656f1f14579" type="hidden" />
      <input name="access_token_ttl" value="10000000000000000000000000" type="hidden" />
      <input type="submit" value="submit" />
</form>

Question: How to make axios request that will work?

PS Here's the screenshot of error

Answer 1

You are bumping into the same origin policy when using axios, so in order to read documents, scripts, etc. cross-origin you need to use CORS .

Form submission works because cross-origin writes are not subject to the same origin policy. In particular,

Cross-origin writes are typically allowed. Examples are links, redirects, and form submissions. Some HTTP requests require preflight.