Nuxt.js + axios で CORS エラーの解決方法

Thu, May 20, 2021 - 2 min read

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 の正しい書き方


  modules: [

  axios: {
    proxy: true

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

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