I handled CORS errors in Nuxt.js SPA mode, so I’ll introduce the solution.

Background: nuxt-community/proxy-module Doesn't Work in SPA Mode

To resolve “Access to XMLHttpRequest at xxx has been blocked by CORS policy” in Nuxt.js, I handled it in the previous article How to Solve CORS Errors with Nuxt.js + axios, but it didn’t work in SPA mode.

⚠ Does not work with nuxt generate (see static target).

Source: nuxt-community/proxy-module: The one-liner node.js http-proxy middleware solution for Nuxt.js using http-proxy-middleware

Solution

// nuxt.config.ts

axios: {
  baseURL: process.env.API_BASE_URL
},

# .env

API_BASE_URL=http://localhost:3000

By setting API_BASE_URL like this and handling CORS on the API server side that’s running, you’re done.

That’s all from the Gemba about handling CORS errors in Nuxt.js SPA mode.