JavaScriptで他のサイトの情報を取得する方法（別ドメインでも可能）

JavaScriptで他のサイト（異なるドメインのサイト）からデータを取得しようとすると、Chromeの場合は以下のようなエラーが出ます。

AAA | American Automobile Association

aaa.com

これはbbb.comというサイトからaaa.comのデータを取得しようとしたときの場合。

設定を変えていない限り、別ドメインにGETリクエストしようとするとブラウザがブロックしてしまいます。

ここではブラウザの設定を変えたりすることなく外部サイトからデータを取得する方法を紹介したいと思います。

二通りの方法

ブラウザにブロックされずに外部サイトからデータを取得する方法は二通りあります。

• 取得したいデータがあるサイト側でクロスオリジンリクエストを許可する
• phpを経由してデータを取得する

１つ目の方法

１つ目の方法は、取得したいデータがあるサイト側で、別ドメインからのリクエストを許可するというものです。

この方法なら、JavaScriptでリクエストをするだけでエラーを出さずにデータを取得できます。

注意点

ただし、この方法には条件があります。

対象サイト（取得したいデータがあるサイト）側でクロスオリジンを許可する必要があるので、そのサイトの所有者が自分でないといけません。

他の人のサイトからデータを取得したい場合は、２つ目の方法を使わなければなりません。

例えばbbb.comからaaa.comにあるlog.phpのデータを取得したい場合、

log.phpに以下のようにヘッダーをセットすれば良いです。

<?php header("Access-Control-Allow-Origin: *"); ?>

こうすることで別ドメインからのリクエストしてもエラーが出なくなります。

もしphp以外のhtmlやjsonを取得したいなら、サーバーの設定でクロスオリジンを許可するか２つ目の方法を使うのをオススメします。

２つ目の方法

２つ目の方法は、JavaScriptから直接外部サイトにリクエストを送らずに、データの取得はphpにやらせようというものです。

対象サイトの所有者が自分以外（他人のサイト）でも使える方法がこちらになります。

phpが動作するサーバーであることが条件です。

JavaScriptと一緒にrequest.phpというphpファイルをサーバーに置きます。

request.phpの中身は以下のようにします。

<?php
header('Content-Type: application/json; charset=utf-8');

$url = "https://aaa.com/test.json";
$conn = curl_init();
curl_setopt($conn, CURLOPT_URL, $url);
curl_setopt($conn, CURLOPT_RETURNTRANSFER, true);
$res = curl_exec($conn);
echo ($res);
curl_close($conn);

?>

これはaaa.comのtest.jsonを取得する例です。request.phpにアクセスすると取得したデータが表示されます。

これを一緒にアップロードしてJavaScriptからrequest.phpにリクエストを送れば、別サイトのデータを取得できるのがわかると思います。

まとめ

１つ目の方法は両方自分のサイトでないと使えないので微妙ですが、JavaScriptのみでデータ取得できます。

２つ目の方法は自分のサイト以外からもデータを取得できるのでけっこう使えると思います。

用途にあわせて使い分けてみるといいかもしれません。