Rails API, devise user registration, CORs signup with Vue Js

Question

I have a curious CORS error in a Rails API setup with post request from Vue signup,

Despite setting the values at localhost:8080 for the Vue app and localhost:3000 for the response, it still wont allow access.

Rails CORs settings are below.

Rails.application.config.middleware.insert_before 0, Rack::Cors do
   allow do
     origins 'localhost:8080'

     resource 'localhost:3000',
       headers: :any,
       methods: [:get, :post, :put, :patch, :delete, :options, :head]
   end
 end

The request method using Nuxt axios plugin is below'

 // Check submit
        signin () {
        this.$plain.post( '/api/v1/sign_up/', { email: this.email, password: this.password, password_confirmation: this.password_confirmation} )
        .then(response => this.signinSuccessful(response))
        .catch(error => this.signinFail)
        console.log({ email: this.email, password: this.password, password_confirmation: this.password_confirmation });
        alert('Processing!');
        },

And the axios plugin code itself is also below.

/* eslint-disable */
import axios from 'axios'
export default function ({ $axios, store }, inject) {
  const API_URL = "http://localhost:3000"

  const secured = axios.create({
    baseURL: API_URL,
    withCredentials: true,
    headers: {
      "Content-Type": "application/json",
    },
  })
  const plain = axios.create({
    baseURL: API_URL,
    withCredentials: true,
    headers: {
      "Content-Type": "application/json"
    },
  })
  secured.interceptors.request.use((config) => {
    const method = config.method.toUpperCase();
    if (method !== "OPTIONS" && method !== "GET") {
      config.headers = {
        ...config.headers,
        "X-CSRF-TOKEN": localStorage.csrf,
      };
    }
    return config;
  });
  secured.interceptors.request.use(null, (error) => {
    if (error.response && error.response.config && error.response.status === 401) {
      return plain
        .post("/refresh", {}, { headers: { "X-CSRF-TOKEN": localStorage.csrf } })
        .then((response) => {
          localStorage.csrf = response.data.csrf;
          localStorage.signedIn = true;
  
          let retryConfig = error.response.config;
          retryConfig.headers["X-CSRF"] = localStorage.csrf;
          return plain.request(retryConfig);
        })
        .catch((error) => {
          delete localStorage.csrf;
          delete localStorage.signedIn;
  
          location.replace("/");
          return Promise.reject(error);
        });
    } else {
      return Promise.reject(error);
    }
  })
inject('plain', plain)
inject('secured', secured)
}

It is getting rejected due to CORs policy for authenticated requests as in screenshot, and I tried changing "with-credentials" to false but got error bad request, any tips on this welcome?