60026


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

[code]

    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.
    
[/code]

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

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

[code]

    <!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>
    
[/code]


CC BY-SA 4.0
2019-10-26T06:08:13.013
59991
2019-10-28T00:03:30.817
2019-10-26T06:29:09.937
32986
36357
question
javascript jquery ajax xml
xmlファイルをjQueryで読み込み時にCORSエラー


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>


CC BY-SA 4.0
2019-10-28T00:03:30.817
60026
2019-10-28T00:03:30.817
22665
59991
answer