CORS redirect issue on a local development environment Laravel and Vue project

I’m having some CORS issues. In my environment I have:

  • Laravel project running on 127.0.0.1:8000
  • Vue project running on localhost:8080

This is the configuration of Vue:

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    proxy: {
      '/api': {
        target: 'http://127.0.0.1:8000',
        changeOrigin: true
      },
      '/sanctum': {
        target: 'http://127.0.0.1:8000',
        changeOrigin: true,
      }
    }
  }
})

I’m trying to do the following requests to the Laravel server:

axios.get('sanctum/csrf-cookie').then(() => {
    axios.post('api/login', {
        email: email,
        password: password
    }).then(response => {
        this.user = response.data.user
        this.token = response.data.token
    })
})

In the first request, the XSRF token is being set. The second request to ‘api/login’, however, is receiving a 302 redirection to 127.0.0.1:8000 (the /api/login route is not being considered).
The Javascript console is showing the following error:
Access to XMLHttpRequest at 'http://127.0.0.1:8000/' (redirected from 'http://localhost:8080/api/login') from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

I’ve tried changing both client and server side configurations but I’m always going back to where I started from.