Nuxt.js で axios を利用して CORS エラーが発生した場合の解決方法をご紹介します。

背景 Access to XMLHttpRequest at xxx has been blocked by CORS policy

Access to XMLHttpRequest at ‘http://localhost:3000/api/me’ from origin ‘http://localhost:3001’ 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.

のようなエラーが Nuxt.js + axios で発生しました。

結論 axios オプション proxy: true で解決

nuxt.config.js に axios オプション proxy: true を指定して無かったので、指定したら解決しました。

  axios: {
    proxy: true
  },

nuxt.config.js の正しい書き方

nuxt.config.js

{
  modules: [
    '@nuxtjs/axios'
  ],

  axios: {
    proxy: true
  },

  proxy: {
    '/api/': { target: 'http://localhost:3000', pathRewrite: {'^/api/': ''} }
  }
}

以上、Nuxt.js + axios で CORS エラーを解決した、現場からお送りしました。

参考情報

• proxy option - Axios Module
• Nuxt.js AxiosでCORSエラーを直す(Proxy)