LoginSignup
2

More than 5 years have passed since last update.

GitHub の草ページ URL を axios で叩いて取得しようとして失敗した

Last updated at Posted at 2018-01-28

概要

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2