jsonp
vue.js

覚え書き Vue.jsでjsonpを使ってみる

htmlコーダーがフロントエンドを学ぶ記録。
まだまだ初心者だから間違えながら覚えていくぞ!

jsだとapi弾かれがち

vue.jsで簡単なwebアプリが作れるようになり、
apiを試してよくぶち当たったのが
"access-control-allow-origin" 周りのエラー。
jsonpってのを使わないと回避できないクロスドメインのエラーのよう。

でも、vueでjsonpを扱ってる記事って見つからない…。
jqueryはいっぱい出てくるのに!

vueにもあったjsonp

これだ。
https://github.com/LancerComet/vue-jsonp

vue-cli と 単一ファイルコンポーネントでやってる環境前提で。
まずはインストールしましょう。

terminal
$ npm insall --save-dev vue-jsonp

で、使いたいコンポーネントの中でインポートします

hoge.vue
import Vue from 'vue'
import VueJsonp from 'vue-jsonp'
Vue.use(VueJsonp)

使い方はざっくりこんな感じのよう。
Vueコンポーネント内だとthisになるのね。

Static function: Vue.jsonp(url, dataObj, timeout)
In Vue component: this.$jsonp(url, dataObj, timeout)

あとはこんな感じで

hoge.vue
data() {
  return {
    jsonData:''
  }
},
methods: {
  getData (apiUrl) {
    this.$jsonp(apiUrl, { keyword: 'キーワード' }).then(json => {
      // Success.
      this.jsonData = json
    }).catch(err => {
      // Failed.
    })
  }
}

ってな感じでaccess-control-allow-origin回避できそうです!
いろいろ試してみよ。