Nuxt.js AxiosでCORSエラーを直す(Proxy)

解決方法

nuxt.config.js

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

  axios: {
    proxy: true,
  },

  proxy: {
    '/api/': 'http://api.example.com',
  }
}

解説

1. proxy を有効にする

axios: {
  proxy: true,
}

nuxt/axiosにはnuxt/proxyが含まれているので追加でインストールやmodulesへの指定はいりません。

2. proxy で使うパスを指定する

proxy: {
  '/api1/': 'http://example.com',
  '/api2/': {
    target: 'http://example.com',
    pathRewrite: {'^/api/': ''}
  },
   '/api3/': {
    target: 'http://example.com',
    pathRewrite: {'^/api/': '/'}
  },
}

3. APIを叩く

.vue

this.$axios.get('/api1');      // http://example.com/api1
this.$axios.get('/api1/test'); // http://example.com/api1/test
this.$axios.get('/api2');      // http://example.com/api2
this.$axios.get('/api3');      // http://example.com
this.$axios.get('/api3/test'); // http://example.com/test

右側のコメント部分が実際にリクエストされるURLです。

まとめ

nuxt/axiosのproxyを設定してCORSエラーを回避してAPIなどを使えるようになりました。

色々なサイトを見ると今回の例の/api1や/api2をよく見ますが実際に使うとき普通なら/api3が使いやすいと考えます。

間違いや質問などありましたら気軽にコメントしてください。

（Nuxt.js Axios moduleでCORSエラーの優しい対処法の書き直しです。）