Nuxt.js Axios moduleでCORSエラーの優しい対処法

Nuxt.js の Axios を使って API を叩くとCORSとか言うエラーが発生した場合の対処法。

（CORS 説明は省かせてもらいます）

Zennに書き直しバージョンあります

解決方法

nuxt.config.js

modules: [
      '@nuxtjs/axios',
      '@nuxtjs/proxy'
  ],
proxy: {
  '/api': {
    target: 'http://example.com',
    pathRewrite: {
      '^/api' : '/'
    }
  }
}

クロスオリジンリソースを共有するには？

は？意味わからんって思ったあなた僕も同じでした。

これだけ書かれてもなんにもわかりません 🤔🤔🤔

しかも今プロキシ使う場合ちょっと違う方法を使います。このコードは忘れてください。

とっても優しい解決方法

1. Nuxt.js Axios module をのプロキシ設定をオンにする。

nuxt.config.js

axios: {
  proxy: true
},

2. proxy の設定をする

nuxt.config.js

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

これでhttp://localhost:3000/apiorhttp://your.site/apiにリクエストするとhttp://example.comとして処理されます。

pathRewriteでapiを消してあげるってのを書かなかった場合http://example.com/apiになります。

※Nuxt Axios module には Nuxt proxy module が内蔵されています。

3. API を叩く

this.$axios.$get("/api");

これでさっき設定したhttp://example.comに get リクエストを送っているという事になっていてしっかりとデータが返ってくると思います。

this.$axios.$get("/api/test");

のようなリクエストでもhttp://example.com/testとして利用できます。

終わりに

自分のサイトにリクエストを送ってるのに別のサイトのデータが返ってくるってのに少し違和感を覚えるかもしれませんが、このように設定してあげる事でしっかりと API を使うことができますし、リクエストする URL が短くなって便利だと思います！

最後まで読んでくださってありがとうございます。