Nuxt.js SPA モードで CORS エラー対策

Tue, June 1, 2021 - 1 min read

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 を動かしている API サーバー側で CORS 対応をすれば完了です。

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