nuxtでaxiosを使うとproxyが動作しない。

前提・実現したいこと

axiosでGoogleマップのAPIにアクセスしようとしてるのですが、以下のエラーが発生します。proxyがうまく動いてくれていないようです。

GET http://localhost:3000/api/https://maps.googleapis.com/maps/api/directions/json?origin=H8MW%2BWP%20Kolkata%20India&destination=GCG2%2B3M%20Kolkata%20India&key={APIKEY} 404 (Not Found)

該当のソースコード

javascrpt
1let response = await this.$axios.$get(`/api/https://maps.googleapis.com/maps/api/directions/json?origin=H8MW%2BWP%20Kolkata%20India&destination=GCG2%2B3M%20Kolkata%20India&key=${API_KEY}`)
2

config
1
2  modules: [
3    '@nuxtjs/axios',
4    '@nuxtjs/proxy'
5  ],
6
7  axios: {
8    proxy: true
9  },
10
11  proxy: {
12    '/api': {
13      target: 'http://localhost:3000/',
14      changeOrigin: true,
15      pathRewrite: {
16        '^/api': ''
17      }
18    },
19  },

試したこと

apiがURLに複数含まれているのが原因かと思い、

this.$axios.$get(`/api/https:/...api/...)

を

this.$axios.$get(`/test/https:/.../api/...)

としてみて、configもいじくってみましたが同様のエラーが発生します。

また、試しにproxyを

config
1proxy:{
2  '/api': 'http://api.another-website.com'
3}
4

のように変えると

HPM] Error occurred while trying to proxy request /api/https://maps.googleapis.com/maps/api/directions/json?origin=H8MW%2BWP%20Kolkata%20India&destination=GCG2%2B3M%20Kolkata%20India&key=APIKEY from localhost:3000 to http://api.another-website.com (ENOTFOUND) (https://nodejs.org/api/errors.html#errors_common_system_errors)

というエラーがlinuxに表示されました。

4時間ぐらいハマってます。詳しい人助けて.....