LoginSignup
1

More than 1 year has passed since last update.

posted at

updated at

【ajax】"CORSポリシーによってブロックされています" によりデータが取得できない

1.実現したいこと

jQuery + Ajax で YouTube Data APIを使用し、特定のキーワードで検索を行い、動画のサムネイル、タイトル、URLを取得したい。
そのためにボタンを押した際、下記コードでサーバーにリクエストを送信した。

main.js
$button.on("click", function () {
    let url = "https://www.googleapis.com/youtube/v3/search";
    url += "?key=" + KEY;
    url += "&part=snippet";
    url += "&type=video";
    url += "&q=%20筋トレ%20ジム" + $(this).data("parts");
    url += "&maxResults=6";
    $.ajax({
      url: url,
      type: "GET",
      dataType: "json",
    })
      .done(function (data) {
        for (let i = 0; i < data.items.length; i++) {
          let html = `
          <li>
            <a href="https://www.youtube.com/watch?v=${data.items[i].id.videoId}" target="_blank">
              <dl>
                <dt>
                  <img src="${data.items[i].snippet.thumbnails.high.url}">
                </dt>
                <dd>${data.items[i].snippet.title}</dd>
              </dl>
            </a>
          </li>
          `;
          $mov_blk.append(html);
        }
      })
      .fail(function () {
        $mov_blk.html('<li class="no_video">検索結果はありません</li>')
      });
  });

2.エラー内容

Access to XMLHttpRequest'リクエストを送ったURL' is blocked by CORS policy: No'Access-Control- The Allow-Origin header is present in the requested resource.

【日本語訳】
URLはCORSポリシーによってブロックされています:いいえ' Access-Control-Allow- Originのヘッダーはリクエストされたリソースに存在します。

3.調査

以下のワードでググる

  • Access-Control-Allow-Origin ajax
  • CORSポリシーによってブロック

4.原因

クロスドメインに引っかかりエラーが出ていた。
CORSという制約により、やり取りする間で特別な取り決めが無い限り、すべてのサーバーと自由にやり取りをできるわけではない(同じドメイン以外は通信不可)

参考:クロスドメインCORS

5.解決策

dataType: "jsonp"に変更。

main.js
$button.on("click", function () {
    let url = "https://www.googleapis.com/youtube/v3/search";
    url += "?key=" + KEY;
    url += "&part=snippet";
    url += "&type=video";
    url += "&q=%20筋トレ%20ジム" + $(this).data("parts");
    url += "&maxResults=6";
    $.ajax({
      url: url,
      type: "GET",
      dataType: "jsonp", //jsonpに変更
    })
      .done(function (data) {
        for (let i = 0; i < data.items.length; i++) {
          let html = `
          <li>
            <a href="https://www.youtube.com/watch?v=${data.items[i].id.videoId}" target="_blank">
              <dl>
                <dt>
                  <img src="${data.items[i].snippet.thumbnails.high.url}">
                </dt>
                <dd>${data.items[i].snippet.title}</dd>
              </dl>
            </a>
          </li>
          `;
          $mov_blk.append(html);
        }
      })
      .fail(function () {
        $mov_blk.html('<li class="no_video">検索結果はありません</li>')
      });
  });

▼JSONPとは
異なるドメインに存在するデータを取得する仕組みのこと。

JSONPは危険という記事もあったので、実用であれば ”Access-Control-Allow-Origin” をPHPや.htaccessで設定した方が安全かもしれません。

参考:JSONPは危険なので禁止

6.参考資料

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
What you can do with signing up
1