ローカルで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 & 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>