axiosをnuxtで使う方法です。
nuxtでのaxiosの導入方法と、実際に使ってQiitaからデータを取ってきてみています。
zipcloudという郵便番号サービスにアクセスを行うと、cros制約にかかったので
cros制約をnuxtで回避する方法についても記載しています。
導入する
yarnまたはnpmでインストールします。
yarn add @nuxtjs/axios
or
npm install @nuxtjs/axios
nuxt.config.jsを修正
nuxt.config.jsのmodulesに追加します。
modules: [
'@nuxtjs/axios',
],
使ってみる(qiita apiへアクセス)
スクリプト
export default {
data () {
return {
qiitaArticles: []
}
},
async mounted() {
let page = this;
await this.$axios.$get('https://qiita.com/api/v2/items?page=1&per_page=10').then(function(result){
page.qiitaArticles = result;
});
},
// --- 省略 ---
}
mountedでqiitaからデータを取ってくるようにしてみました。
axiosはajax通信でアクセス先からデータを取ってきます、通信時にレスポンスが返るまで待ってもらいたい場合はasync, awaitを書いておきます。
this.$axiosでaxiosが使えるので、（modulesに書いたから、thisからアクセスできるのかな..？)
今回はgetメソッド(this.$axios.$get)を使って、Qiitaから最新記事10件を取得しています。
通信が完了するとthenに入ってきて、クロージャで処理されます。
通信完了したら、this.qiitaArticlesにデータを入れるようにしています。
タグ
<!--- 省略 --->
<v-col cols="12">
<h2 v-if="qiitaArticles.length !== 0">
qiitaの記事 - 作成日付降順
</h2>
<v-list>
<v-list-item-group v-for="(item, index) in qiitaArticles" :key="index">
<v-list-item>
<v-list-item-content><a :href="item.url" target="_blank">{{item.title}}</a></v-list-item-content>
</v-list-item>
<v-divider></v-divider>
</v-list-item-group>
</v-list>
</v-col>
<!--- 省略 --->
qiitaArticlesに入ったデータをv-forでループして、リスト表示しています。
動作確認
表示されました！
使ってみる(zipcloudへアクセス)
CROSエラー
次はzipcloudにアクセスしてみようと思って、nuxtからqiitaと同じ時のように$getアクセスを書いたらエラーになりました😧
CROSとは
CROSについてはこの辺のサイト様とかを参考にしてください。
Webサーバーにクロスドメインを許可する設定をしておかないと、同一ドメイン制約にかかってエラーになるようです。
エラー内容
zipcroudにgetアクセスするとcrosにかかって、郵便番号が取れませんでした。
Access to XMLHttpRequest at 'https://zipcloud.ibsnet.co.jp/api/search?zipcode=8100012' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
なぜqiitaへのアクセスはエラーにならないのか
chromeでレスポンスを確認すると…
Access-Control-Allow-Origin: *
oh…
すべてのドメインからアクセスできるような設定が入っていますね。
nuxtでCROS制約を回避する
@nuxtjs/proxyを使って、同一ドメインアクセスのように振る舞うと回避できます。
@nuxtjs/proxy
yarnまたはnpmでインストールします。
yarn add @nuxtjs/proxy
or
npm install @nuxtjs/proxy
nuxt.config.jsを修正
modulesの設定を下記のように書いて…
modules: [
'@nuxtjs/axios',
'@nuxtjs/proxy'
],
axios, proxyの設定を下記のようにしました。
axios: {
proxy: true
},
proxy: {
'/zipApi/': {
target: 'https://zipcloud.ibsnet.co.jp',
pathRewrite: {'^/zipApi/': ''},
}
}
アクセスしてみる
トップページ読み込み時にアクセスしに行くように下記を追加しました..
await this.$axios.$get('/zipApi/api/search?zipcode=8100012').then(function(result) {
console.log(result);
});
動作確認
取ってこれました！
コメント