Why does sending application/json via axios cause a CORS error?

Question

CORS

I'm trying to send a post request via axios to the server like this:

axios
        .post('/authors', {...this.loginFields, ...this.registerFields})
        .then(response => {
          if (response.data.result === 'success') {
            // success
          } else if (response.data.result === 'error') {
            // error
          }
        })
        .catch(error => console.error(error))

When doing this, I get the following error in the console:


With this request:


However, it is worth changing the sent data to a string, and I do not get this error. Those. this code is ok:

axios
        .post('/authors', JSON.stringify({...this.loginFields, ...this.registerFields}))
        .then(response => {
          if (response.data.result === 'success') {
            // success
          } else if (response.data.result === 'error') {
            // error
          }
        })
        .catch(error => console.error(error))

With this request:


At the same time, nginx is configured to send the cors header like this:

location / {
  add_header Access-Control-Allow-Origin *;
  try_files $uri $uri/ /index.php?$args;
}

What could be the issue here?

Answer 1

https://developer.mozilla.org/en/docs/Web/HTTP/CORS

Valid values ​​for the Content-Type header are:
application/x-www-form-urlencoded
multipart/form-data
text/plain

It's all about the setup.

Answer 2

Do you have a frontend and a backend on different "local domains"? Set up CORS and headers on the server.