質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.80%

Ajaxを使ったクロスドメイン通信でエラーが出てしまう(Chrome)

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 749

natecosan

score 23

解決したいこと

Railsで投稿型SNSアプリを作っています。
その中で、itunesAPIを叩いて音楽情報を検索する機能を作っているのですが、本番環境で実行するようにしてからクロスドメインエラーで弾かれるようになってしまいました。

エラー画面

本番環境(https://agile-thicket-68616.herokuapp.com/
ヘッダーの検索フォームにアーティスト名とCDタイトルを入れてSearchボタンを押すとajax通信を行い、
右側に検索結果が表示される仕様になっていますが、検索ボタンを押すとこのようなエラーが出てしまいます。

Access to XMLHttpRequest at 'https://itunes.apple.com/search?&term=the+internethive+mind&country=jp&media=music&entity=album&lang=ja_jp&limit=10' from origin 'https://agile-thicket-68616.herokuapp.com' has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header has a value 'http://evil.com/' that is not equal to the supplied origin.

エラー画面
イメージ説明

ソースコード

「search.js」

$(function () {
  $('#search_button').click(
    function () {
      var artistname = $('#new_micropost [name=artistname]').val();
      var albumname = $('#new_micropost [name=albumtitle]').val();
      var term = artistname + albumname;
      $.ajax({
        url: 'https://itunes.apple.com/search?',
        type: 'GET',
        data: {
          term: term,
          country: 'jp',
          media: 'music',
          entity: 'album',
          lang: 'ja_jp',
          limit: '10'
        },
        dataType: 'json',
        timespan: 1000
      }).done(function (data) {
        var result = data.results[0];
        var resultcount = data.resultCount;
        if (result == null) {
          $("#image-box").children("img").attr({ 'src': '' });
          $('#searchresult').text("検索結果が見つかりません");
        }
        else {
          $("#searchresult").remove();
          $('#artistname').text(result.artistName);
          $('#albumtitle').text(result.collectionName);
          $('#artwork').text(result.artworkUrl100);
          var url = result.artworkUrl100;
          $("#image-box").children("img").attr({ 'src': url });
        }

      }).fail(function (jqXHR, textStatus, errorThrown) { //通信が失敗した時
        $("#span1").text(jqXHR.status); //例:404
        $("#span2").text(textStatus); //例:error
        $("#span3").text(errorThrown); //例:NOT FOUND
      });
    });
})


検索フォーム部分のhtml.erb

<div class="row">
<%= form_for(@micropost,:html => {:class => "form-inline"}) do |f| %>
  <%#= render 'shared/error_messages', object: f.object %><!--エラーメッセージ-->
    <div class="row col-md-4">
    <p class="searchresult"><span id="artistname"></span></p>
    <%= f.text_field :artistname, placeholder: "Artist Name", class:"form-control mb-2 mr-sm-2 searchform" ,name: "artistname"%>
    <p class="searchresult"><span id="albumtitle"></span></p>
    <%= f.text_field :albumtitle, placeholder: "Album Title", class:"form-control mb-2 mr-sm-2",name: "albumtitle" %>
    </div>
    <div class="col-md-3">
    <div id="image-box"><img /></div><p id="searchresult"></p></div>
    <div class="form-group col-md-4 mood">
    <%= f.text_field :content, placeholder: "Choose your mood",class:"form-control mb-2 mr-sm-2"%>
    </div>
    <div class="form-group col-md-3 post">
    <%= f.submit "Post", class:"btn btn-primary header_btn btn-sm mb-2 mr-sm-2" %>
    </div>
<% end %>

<input type="button" id="search_button" value="search" class="btn btn-info btn-xs pull-left">
</div>

試したこと

最初、本番環境からこの操作を行った時に、

Access to XMLHttpRequest at 'https://itunes.apple.com/search?&term=the+internethive+mind&country=jp&media=music&entity=album&lang=ja_jp&limit=10' from origin 'https://agile-thicket-68616.herokuapp.com' has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header has a value 'http://evil.com/' that is not equal to the supplied origin.

以上のエラーコード 「The 'Access-Control-Allow-Origin' header has a value」以降が'http://localhost:3000/'になっていたため、この記事などを参考にchromeのAllow-Control-Allow-Origin: *拡張機能を入れたところ、今度は現在のhttp://evil.com/が出てしまうようになりました。

利用者46万人・レビュー☆4(777人)のchrome拡張に潜む罠... Rails < "HTTP Origin header (http://evil.com/) didn't match request.base_url"を読んで、慌てて拡張機能を削除したのですが元に戻らず。。。

サーバー側の設定などが必要という対処方法をいくつか調べたのですが、初学者のため全く設定方法がわからず困っています。
どうかよろしくお願いいたします!!

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+1

クロスドメインならjsonp

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/05/26 22:40

    ありがとうございます!解決しました。妙な思い込みでjsonpにするのを試していませんでした・・・

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.80%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る