#問題
####Vue.js(フロントエンド)から外部の(一部の)APIを呼び出す際、クロスドメインの制限でレスポンスを使えなくなってしまう。
###Q.そもそもなぜこんなことになっているのか
A.セキュリティの問題でそのWebアプリケーションのドメインのサーバとしか通信できないというブラウザの制約があるため。
##対策
調べたところ色々な対策が存在するようです。詳しく理解したいorしっかりと問題を解決したい方はこちら等をご参照下さい。
今回は少しずるい方法でサクッと解決したのでその覚え書きです。
##今回の解決法
この制約、ブラウザに付いているため、サーバーサイド等からは通常通りAPIを利用することが可能です。
そこで適当なPHPの動くサーバー(筆者はlolipopのサーバーがあったので)にAPIを叩いてその値をそのまま返すphpを設置しました。
<?php
$url = 'APIのアドレス';
$json = file_get_contents($url);
header("Access-Control-Allow-Origin: *");
print $json;
?>
これで同じアドレスから取得したものを永遠に返せるphpが出来ました。あとはこのphpをaxiosで呼べば帰ってくるのは目的のデータです。
ポイントは header("Access-Control-Allow-Origin: *");
で、このレスポンスはどこからでも使えるよヘッダーを付けています。
今回は行いませんでしたがアクセス先のAPIを動的に変更することもphpにURLを渡すだけなのでカンタンです。
####※この方法はセキュリティの問題によるブラウザの制限を迂回しています。試すなら自己責任でお願いいたします。
もうすこし簡単に解決する方法もあれば教えていただけると幸いです。