Edited at

nuxt.js で axios から外部APIを叩くとCORSエラーを解決

開発環境 localhost:3000 から外部の rest api を叩きたいという時にエラー :expressionless:

〜 has been blocked by CORS policy: Invalid response. 

CORS ... CSRF ... 聞いたことはあってなんとなく知ってるけど, 特に困ってないから深追いはしてなくて ... という感じの存在でした

以下の記事が分かりやすかったです CORS

https://qiita.com/tomoyukilabs/items/81698edd5812ff6acb34


  • Cross-Origin Resource Sharing の略

  • 信頼のないドメインを蹴ったりするのに使うもの

  • localhost -> 外部api でドメインが変わるので怒られていた

nuxt での CORS 対策は, 調べてみると, @nuxt/proxy を install してる記事が多かったですが @nuxt/axios 自体に proxy 設定がありました

https://axios.nuxtjs.org/options#proxy

ので以下の変更でいけました

plugin/axios.js を追加

+ export default function({ $axios, redirect }) {

+ $axios.setToken('access_token')
+
+ // 注: ここの引数を今は使わないからと _ とかにするとエラーになる
+ $axios.onResponse(config => {
+ $axios.setHeader('Access-Control-Allow-Origin', /** 許可するドメイン http://exsample.com あるいは通すだけなら '*' **/)
+ })
+ }

nuxt.config.js に以下を追加

-  plugins: ['@/plugins/vuetify'],

+ plugins: ['@/plugins/vuetify', '~/plugins/axios'],
...
...
axios: {
// See https://github.com/nuxt-community/axios-module#options
+ proxy: true,
},
+ proxy: {
+ '/api': 'https://api.〜',
+ },

たったこれだけのことに半日持ってかれました:scream_cat: