質問: ローカルで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のソースは以下の通りです。 ``` jQuery::RSS(XMLファイル)を読み込んで表示 | 非同期通信::Ajaxリクエスト::jQuery.ajax(options)の使用例 PHP & JavaScript Room :: 設置サンプル jQuery.ajaxの使用例 実行結果 jQuery::非同期通信::Ajaxリクエスト::jQuery.ajax(options)の使用例 RSS(XMLファイル)を読み込んで表示します。 新着情報 ```
回答: CORS (Cross-Origin Resource Sharing)は セキュリティの観点上、特定の利用に関して同じOriginだけリソースが取得できるという制約です。 「特定の利用」は今回の質問中にあるXMLHttpRequestが含まれており 「Origin」とはスキーム、ホスト、ポートの組み合わせになります。 以下すべてNG から file://C/download/all-c_int.xml のAjaxでのファイルアクセス(スキーム違いによりNG) から のAjaxでのファイルアクセス(ホスト違いによりNG) そのため同じスキームで同じホストで同じポートのファイルに対してAjaxでアクセスしてください。 どうしてもリアルタイムで、別ORIGINのリソースを取得したいということであればXMLHttpRequestでの取得は難しいので、代替案としてはサーバサイドにてXMLの取得をしてみてください。 利用できる言語がわからないので、そちらの説明は省きますが ざっくりとした解説で からAjaxで にアクセスして をサーバサイドで を取得し、それを返す。という方法が取れると思います。 検索方法としては 「(サーバサイドの言語) HTTPリクエスト」という検索をしてもらえればいくつも事例が見ることができるでしょう。 参考