Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

問題

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

※この方法はセキュリティの問題によるブラウザの制限を迂回しています。試すなら自己責任でお願いいたします。

もうすこし簡単に解決する方法もあれば教えていただけると幸いです。

unotovive
Web系の技術に興味を持ってちょこちょこと触っていきます. https://twitter.com/unotovive
http://unotovive.me
yumemi
みんなが知ってるあのサービス、実はゆめみが作ってます。スマホアプリ/Webサービスの企画・UX/UI設計、開発運用。Swift, Kotlin, PHP, Vue.js, React.js, Node.js, AWS等エンジニア・クリエイターの会社です。Twitterで情報配信中https://twitter.com/yumemiinc
http://www.yumemi.co.jp
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした