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

JavaScript

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

Access to fetch at ‘https://aaa.com/’ from origin ‘https://bbb.com/’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.

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

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

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

スポンサーリンク

二通りの方法

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

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

    1つ目の方法

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

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

    注意点

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

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

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

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

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

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

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

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

    2つ目の方法

    2つ目の方法は、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にリクエストを送れば、別サイトのデータを取得できるのがわかると思います。

    まとめ

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

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

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

    コメント

    タイトルとURLをコピーしました