Vue.js axiosでAPIを取得する際のCORSエラーの回避方法
はじめに
開発環境のVue.jsでaxiosを使いホットペッパーのAPIを叩き、
店舗情報を表示するアプリを勉強がてら作成していたところ、
CORS(Access-Control-Allow-Origin)のエラーが発生した為、
その原因等を簡単に調べたため、エラー回避方法を備忘録として残します。
【おすすめ】フロントエンドエンジニアになりたい人の Webプログラミング入門 
問題点
Originが違うため、ブラウザでアクセスが拒否されます。
解決方法
・CORSを設定する
・proxyを使って、回避する。
今回はproxyを使用し解決
まず、Vue.js側のroot階層に、vue.config.jsファイルを作成し、
下記コードを書きます。
あとは axios を使って呼び出す際にアクセスする、
URI の部分を指定します。
上記の様にすることで、すべてのリクエストは一度プロキシを経由し、
アクセスするようになります。
今回はレスポンスがXMLデータのため、
json形式に変換するためXml2jsonを使用しています。
Home.vue
<script>
import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios,axios)
export default {
data(){
return{
items: null
}
},
mounted(){
var parseString = require('xml2js').parseString;
.then(response => {
var self = this
parseString(response.data, function (err, result) {
self.items = result.results.shop
});
})
}
}
これで無事に、policyを回避し処理することができました。
参考サイト
