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 install --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回避できそうです！
いろいろ試してみよ。