なぜかCORS対策をしようとしてNuxt.js+axiosでproxyがうまく動かないあなたへ

2020年9月18日

公式マニュアルをみたけど動かない。参考サイトを漁ったけど、うまく動かない。そんな状態に２日連続陥ったので、うまく行った方法を記載する。

バージョン

Nuxt.js: 1.17.3
@nuxtjs/axios: 5.12.2
@nuxtjs/proxy: 1.4.1

nuxt.config.js

    modules: [
        '@nuxtjs/proxy',
        '@nuxtjs/axios',
    ],
    proxy: {
        '/api': {
            target: 'APIのURL',
            pathRewrite: {
                '^/api': '',
            },
        },
    },
    axios: {
        prefix: '/api',
        // proxy: true は入れてはいけない
    },

注意点はいくつかある。一つは、「proxy -> axios」の順序に設定すること。次に、axiosには「prefix」を設定すること。prefixでつけたものは、proxy内のpathRewriteで消して送るため、あまり影響はない。必要なさそうだけど、上記設定をしないとうまく行かない場合があった。最後に、axiosの設定で「proxy: true」の設定をいれないこと。これはおそらくNuxt.jsの古いバージョンでは@nuxtjs/proxyが標準でなかったからかもしれないが、紹介サイトでは使うように紹介しているところがあった。

実際の使用方法

this.$axios.post('/login/token', {params}).then((res) => {
    console.log(res)
}).catch((error) => {
    console.log(error)
})

axiosのAPIのURLにはドメインを省いたものを指定する。すると下の図のようになる。