Nuxt.js - No 'Access-Control-Allow-Origin' header is present on the requested resource

Question

Errors

Access to XMLHttpRequest at 'https://api.domain.com/api/register' from origin 'https://nuxt-app.domain.com' 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 am using PHP Laravel for backend API development and Nuxt.js for my frontend application.

Laravel Sanctum Installation

1. composer require laravel/sanctum
2. php artisan vendor:publish --provider="Laravel\Sanctum\SanctumServiceProvider"
3. php artisan migrate
4. In App/Http/Kernel.php to api middleware group, Add Laravel\Sanctum\Http\Middleware\EnsureFrontendRequestsAreStateful::class
5. In config/cors.php, set supports_credentials to true
6. In .env file, add SESSION_DOMAIN=.domain.com and SANCTUM_STATEFUL_DOMAINS=nuxt-app.domain.com
7. In routes/api.php, Modify Route::middleware('auth:sanctum')

nuxt.config.js

{
modules: [
    '@nuxtjs/axios',
    '@nuxtjs/auth-next'
  ],

axios: {
    credentials:true,
    proxy: true 
  },

proxy: {
    '/api': {
      target: 'https://api.domain.com',
      pathRewrite: { '^/api': '/' }
    }
  },

auth: {
    strategies: {
      laravelSanctum: {
        provider: "laravel/sanctum",
        url: "https://api.domain.com",
        endpoints: {
          login: {
            url: "/api/login",
            method: "POST"
          },
          logout: {
            url: "/api/logout",
            method: "POST"
          },
          user: {
            url: "/api/user"
          }
        },
        user: {
          property: false
        }
      }
    },

    redirect: {
      login: "/login",
      logout: "/login",
      home: "/dashboard"
    }
  },
}

Register.vue

<script>
export default {
  middleware: ["guest"],
  head() {
    return {
      title: "Register",
    };
  },
  data() {
    return {
      form: {
        name: "",
        email: "",
        password: "",
        password_confirmation: "",
      },
      errors: [],
    };
  },
  methods: {
    async register() {
      await this.$axios.get("https://api.domain.com/sanctum/csrf-cookie");
      await this.$axios
        .$post("https://api.domain.com/api/register", this.form)
        .then((response) => {       
          console.log(response);
          this.$router.push("/login");
        })
        .catch((error) => {      
          this.errors = error.response.data.errors;
          console.log(this.errors);
        });
    },
  },
};
</script>

Is there anything else to do? If 'Yes' then, please guide me. Otherwise, Why it's not working on the production server? Does anyone know how to fix this error?