100DaysOfCode #18: Vue.js <script>直接組み込み(8) watchと公開されているWeb APIでGETを試したいときの注意
やったこと
- 算出プロパティとウォッチャ: 2h
今日の進捗のコードはコチラ。
Vue.jsの知見を聴きに勉強会に参加しました。
Web APIを試したい！…アクセスキーが不要なAPIを試そうとするとCORSの制限に引っかかる
ウォッチャのサンプルで「テキストボックスの入力が終わって少ししたらAPIに問い合わせる」というモノを作りたいときに
とりあえず 問い合わせにAPIキーがいらないWeb APIを使いたいのです。
このAPI一覧など参考になります。
そのうちのWikipediaの記事を検索して取得するAPIを試そうとすると、 CORSの制限でGETすらできない模様。
https://ja.wikipedia.org/w/api.php?format=json&action=query&prop=revisions&titles= { Keyword } &rvprop=content&rvparse&callback=jsonData
has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
代わりにデータを取得する中継サーバーを作る
これを解決するには、問い合わせを受ける側から適切な Access-Control-Allow-Origin のHTTPヘッダーを付けてクライアントに返す必要があり、
[クライアント: Vue.jsのサンプル] - [HTTPヘッダー(CORS)を付けるサーバー] - [WikipediaのAPI]
という形で中継する必要がある。
データを取ってくるときは、一旦中継するサーバーに問い合わせをして
[クライアント: Vue.jsのサンプル] -> [HTTPヘッダー(CORS)を付けるサーバー]
HTTPヘッダーを付けるサーバー - WikipediaのAPI間はCORSの制限を受けない方法でデータを取得する。
- PHPなら
file_get_contents() - Node.js なら
http.get()？(未検証)
[HTTPヘッダー(CORS)を付けるサーバー] <-> [WikipediaのAPI]
最後に、中継したサーバーからクライアントのVue.jsに返すときに Access-Control-Allow-Origin ヘッダーを付ける。
[クライアント: Vue.jsのサンプル] <- [HTTPヘッダー(CORS)を付けるサーバー]
この中継サーバーを立てる方法をPHPで解決した例はコチラの記事で…
今やらないの？
サンプルのレベルでやるならNodeのexpress.jsでヘッダーを付けたAPIを作ってそれでやり取りするのかなぁ…と思ったけど、
今の <script> 直接読み込みなプロジェクトの構成が大きく変わるのと、Vue.jsの本題から外れてしまうので後ほど。
＃でもVue.jsのドキュメントとは違うことをやりたかった…
