Nuxt.js SPA モードで CORS エラー対応をしたのでご紹介します。

背景 nuxt-community/proxy-module は SPA モードでは動かない

Nuxt.js で Access to XMLHttpRequest at xxx has been blocked by CORS policy を解決するべく、前の記事 Nuxt.js + axios で CORS エラーの解決方法 にて対応しましたが、 SPA モードでは動きませんでした。

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

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

解決方法

// nuxt.config.ts

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

# .env

API_BASE_URL=http://localhost:3000

として API_BASE_URL を動かしている API サーバー側で CORS 対応をすれば完了です。

以上、Nuxt.js SPA モードで CORS エラー対応をした、現場からお送りしました。