Fix Axios Login Post Request Blocked By Cors [Solved]

Method	Action Required
Backend (Recommended)	Install and configure the cors middleware in your Node.js/Express app.
Axios Config	Set withCredentials: true if using cookies or sessions.
Development Proxy	Configure a proxy in your Vite or Webpack config to bypass CORS during dev.

What is Axios login POST request blocked by CORS?

A CORS (Cross-Origin Resource Sharing) error occurs when your frontend application, running on one domain (e.g., localhost:3000), attempts to send a POST request to a backend on a different domain (e.g., localhost:5000).

Browsers block these requests for security reasons unless the server explicitly gives permission. In a login scenario, this usually happens because the OPTIONS preflight request sent by Axios fails or the server doesn’t return the Access-Control-Allow-Origin header.

Step-by-Step Solutions

1. Fix the Node.js Express Backend

The most common way to fix this is to use the cors package on your server. This automatically handles the headers and the OPTIONS requests.

First, install the package:

npm install cors

Then, apply it to your Express application. Make sure to place it above your login routes:

const express = require('express');
const cors = require('cors');
const app = express();

// Enable CORS for all routes
app.use(cors({
  origin: 'http://localhost:3000', // Your frontend URL
  credentials: true // Required for cookies/sessions
}));

app.post('/login', (req, res) => {
  res.json({ message: "Login successful" });
});

2. Configure Axios withCredentials

If your login process involves HTTP-only cookies or sessions, Axios needs permission to send and receive those cookies across different origins.

Modify your Axios POST request to include the withCredentials property:

axios.post('http://localhost:5000/login', {
    username: 'user',
    password: 'password'
  }, {
    withCredentials: true
  })
  .then(response => console.log(response))
  .catch(error => console.error(error));

3. Using a Development Proxy

If you cannot change the backend code, you can use a proxy in your frontend environment. This makes the request appear as if it is coming from the same domain.

If you are using Vite, update your vite.config.js:

export default {
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:5000',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }
}

Now, you can call axios.post('/api/login') without triggering a CORS error in your browser console.