Axios treats bad requests as cors errors

I’ve nginx set as a proxy, django for backend and react for frontend

server {
    listen 80;
    server_name example.com;
    root /usr/share/nginx/html/build/;
    index index.html index.htm;

    location / {

        proxy_pass http://localhost:8000/;

        add_header Access-Control-Allow-Origin *;
        add_header Access-Control-Allow-Credentials "true";

        add_header Access-Control-Allow-Headers '*';
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_redirect off;

    }

}

when sending a login request to backend, if data is successful it works fine, but when entering wrong credentials it displays cors error even though the response is in the backend logs and it says it returned a response

axios code:

const axiosPostRequest = ({url, useToken=true, data}) => {

  if (url && !url.startsWith('http')){
    url = HOST.toString() + url
  }
  let options = {
  }

  if (useToken) {
      options['headers'] = {}
      options['headers']['Authorization'] = `${AUTH_HEADER} ${getAuthToken()}`
  }
  
  return axios.post(url, data, options)
}

Options response headers:

HTTP/1.1 200 OK
Server: nginx/1.24.0 (Ubuntu)
Date: Tue, 02 Jan 2024 17:33:19 GMT
Content-Type: text/html; charset=utf-8
Content-Length: 0
Connection: keep-alive
Vary: origin
Access-Control-Allow-Origin: *
Access-Control-Allow-Headers: accept, authorization, content-type, user-agent, x-csrftoken, x-requested-with
Access-Control-Allow-Methods: DELETE, GET, OPTIONS, PATCH, POST, PUT
Access-Control-Max-Age: 86400
Access-Control-Allow-Origin: *
Access-Control-Allow-Credentials: true
Access-Control-Allow-Headers: *

The duplicate headers might due to installed django cors headers

>Solution :

It isn’t "axios" that throws the CORS error, it is your browser.

CORS is a browser-side security construct. When your browser goes to make a "fetch" or "axios" call, it first sends an OPTIONS request to the URL that it will eventually make a GET/POST/PUT/… request for.

The browser looks at the response headers from the OPTIONS request. That is how the server tells the browser "it is safe to make a fetch from the following sites: ….." — in other words, "it is safe to call this server’s APIs from web pages that are coming from the following sites: …..". This mechanism is how a server is able to tell the browser which sites/pages are safe to call the APIs from.

For example, a bank’s server would indicate that it is only safe to call the APIs from the bank’s website (https://mybank.com). Anyone putting up a web page at some other address (e.g. https://myfakebank.com) could put calls to the bank’s API server, but the browser would throw a CORS error because the fake webpage would not be served from a "valid" site.

So in your case, look at the headers of the RESPONSE to the OPTIONS call in your browser’s NETWORK tab of the Dev Tools and see if it is giving the appropriate response (i.e. Access-Control-Allow-Origin *) in the event of "entering wrong credentials".