Nuxt.js + axios で CORS エラーの解決方法
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 エラーを解決した、現場からお送りしました。
