概要

axios を使って vue.js ファイルから github の https://github.com/users/${id}/contributions ページを叩いて SVG を取得しようとしたが、失敗した。

経緯

github の草(contributions calender)が好きすぎたので、良い感じにビジュアライズするサービスを作りたくなった。

$curl https://github.com/users/longtime1116/contributions

これで良い感じにレスポンスが返って来ることを確認したので、いける！と思った。

ソースコード

こんな感じに実装した。

App.vue

<template>
  <div>
    <p v-if="user_id.length > 0">
    {{user_id}}
    </p>
    <p v-else>
      no id
    </p>
    <input type="text" v-model="user_id" >
    <button @click="getGarden()">show your garden</button>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      user_id: 'longtime1116',
    };
  },
  methods: {
    getGarden() {
      axios.get(
        `https://github.com/users/${this.user_id}/contributions`,
      ).then((response) => { console.log(response.data); });
    },
  },
};
</script>

結果

こんな感じのエラーがコンソールに表示された。
github 側からのレスポンスにAccess-Control-Allow-Originが含まれていないので、ブラウザが許可を与えていないような感じ？

Failed to load https://github.com/users/longtime1116/contributions:
No 'Access-Control-Allow-Origin' header is present on the requested resource.
Origin 'http://localhost:8080' is therefore not allowed access.

デベロッパーツールの Network のところみるとちゃんと get できているのに、悔しい。。。

どうしよう？

間に一枚サーバをかませて、Access-Control-Allow-Originを付与したものをブラウザ側に返すようにすれば良い。

私はこの問題について真に驚くべき解決方法を発見したが、ここに記すには余白が狭すぎる。

追記

克服した
https://qiita.com/longtime1116/items/8fa82d182c7863ca24f1