0

ローカルでindex.htmlを作り、Yahooのニュースページのxmlファイルの中身をjQueryを用いて取得しようとしていますが、Google Chrome Consoleにおいて以下のエラーが生じ、正しくページが表示できません。

Access to XMLHttpRequest at 'http://headlines.yahoo.co.jp/rss/all-c_int.xml?_=1572069687420' from origin 'null' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: Redirect is not allowed for a preflight request.

また、xmlをローカルにダウンロードしても同様のエラーを吐きます。どうすれば良いのでしょうか。教えてくだいさいm(_ _)m

index.htmlのソースは以下の通りです。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
   <title>jQuery::RSS(XMLファイル)を読み込んで表示 | 非同期通信::Ajaxリクエスト::jQuery.ajax(options)の使用例</title>
   <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
   <!-- JS -->
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
   <script>
      $(function(){
         $.ajax({
             url: "http://headlines.yahoo.co.jp/rss/all-c_int.xml",
             type:"GET",
             dataType:"xml",
             timeout:1000,
             xhrFields: {
            withCredentials: true
            },
             cache: false,
             /* エラー発生時 */
             error:function(){
                alert("XMLファイルの読み込みに失敗");
             },
             /* 成功時 */
             success:function(xml){
                $(xml).find("item").each(function(){
                   /* 記事リンク */
                   var item_link=$(this).find("link").text();
                   /* 記事タイトル */
                   var item_title=$(this).find("title").text();
                   /* 記事内容 */
                   var item_desc=$(this).find("description").text();
                   /* 公開日 */
                   var item_date=dateParse($(this).find('pubDate').text());
                   /* 属性の値を取得 */
                   //var item_guide=$(this).find("guid").attr("isPermaLink");
                   /* HTML生成 */
                   if(item_title!="") $("<li></li>").html("<dl><dt><span>"+item_date+"</span><a href='"+item_link+"'>"+item_title+"</a></dt><dd>"+item_desc+"</dd></dl>").appendTo("ol");
                });
             }
         });

      });
      /* 日付のフォーマット */
      function dateParse(dateStr){
         var dateObject=new Date(dateStr);
         y=dateObject.getFullYear();
         m=dateObject.getMonth();
         d=dateObject.getDate();
         if (m < 10) { m ="0"+m; }
         if (d < 10) { d ="0"+d; }
         return y+"年"+m+"月"+d+"日";
      }
   </script>
<body id='example3' class='example'><div class="ads" style="margin:32px auto;text-align:center;"></div><h1 class='h'><a href='/'>PHP &amp; JavaScript Room</a> :: 設置サンプル</h1>
<h2 class='h'>jQuery.ajaxの使用例</h2>
<h3 class='h'>実行結果</h3>
<!-- CONTENT -->
   <h1>jQuery::非同期通信::Ajaxリクエスト::jQuery.ajax(options)の使用例</h1>
   <p>RSS(XMLファイル)を読み込んで表示します。</p>
<!-- CODE -->
   <span class="feed_title">新着情報</span>
   <div class="feed">
      <ol></ol>
   </div>
<!-- / CODE -->
<!-- /CONTENT -->
</body>
</html>
0

1 件の回答 1

1

CORS (Cross-Origin Resource Sharing)は
セキュリティの観点上、特定の利用に関して同じOriginだけリソースが取得できるという制約です。

「特定の利用」は今回の質問中にあるXMLHttpRequestが含まれており
「Origin」とはスキーム、ホスト、ポートの組み合わせになります。
以下すべてNG
http://localhost/index.html から file://C/download/all-c_int.xml のAjaxでのファイルアクセス(スキーム違いによりNG)
http://localhost/index.html から http://headlines.yahoo.co.jp/rss/all-c_int.xml のAjaxでのファイルアクセス(ホスト違いによりNG)

そのため同じスキームで同じホストで同じポートのファイルに対してAjaxでアクセスしてください。

どうしてもリアルタイムで、別ORIGINのリソースを取得したいということであればXMLHttpRequestでの取得は難しいので、代替案としてはサーバサイドにてXMLの取得をしてみてください。
利用できる言語がわからないので、そちらの説明は省きますが
ざっくりとした解説で
http://localhost/index.html からAjaxで http://localhost/getxml にアクセスして
http://localhost/getxml をサーバサイドで http://headlines.yahoo.co.jp/rss/all-c_int.xml を取得し、それを返す。という方法が取れると思います。

検索方法としては
「(サーバサイドの言語) HTTPリクエスト」という検索をしてもらえればいくつも事例が見ることができるでしょう。

参考
https://aloerina01.github.io/blog/2016-10-13-1
https://developer.mozilla.org/ja/docs/Web/HTTP/CORS

1
  • ありがとうございます。セキュリティの観点から難しいと言うことですね。
    – RoXusNeXus
    Commented 2019年10月28日 0:52

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。