9
14

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Axios(vue.jsのajax)で外部APIをたたく時のクロスドメイン問題を(サクッと)解決したメモ

Posted at

#問題
####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を渡すだけなのでカンタンです。

####※この方法はセキュリティの問題によるブラウザの制限を迂回しています。試すなら自己責任でお願いいたします。
もうすこし簡単に解決する方法もあれば教えていただけると幸いです。

9
14
2

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
9
14

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?