質問: タイトルの通り、Jqueryでajaxを使用し、他サイトの情報を所得したいが所得できずに困っています。 ``` ここにajaxの結果を書き換えます ``` urlのサイトから所得したhtmlデータを.resultに表示したいのですが失敗してしまいます。 Consoleには以下記載がありました。 ``` Access to XMLHttpRequest at 'https://kinocolog.com/ajax/test.html' from origin 'http://127.0.0.1:8887' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Cross-Origin Read Blocking (CORB) blocked cross-origin response https://kinocolog.com/ajax/test.html with MIME type text/html. See https://www.chromestatus.com/feature/5629709824032768 for more details. ``` クロスドメインによるエラーなのかと思い、自分なりに調べましたが解決法が分からず質問させていただきます。上記に載っているサイトだけでなく、どんなサイトからも情報が所得できるような解決法があれば是非お教え願いたいです。ご教授よろしくお願いします。
回答: ajax を使ってのクロスドメインでのアクセスは基本的に許可されません。それを回避する策として自分が思い付くのは: (1) アクセスするサイトが質問者さんの管理下にあって CORS を実装できるならそうする。 (2) JSONP の API を提供していれば、JSONP を使う。 (3) ブラウザから ajax でアクセスするのではなく、サーバー側の web アプリでアクセスして (例えば C# なら HttpWebRequest を使うとかして) サーバー側でデータを入手してクライアント(ブラウザ)に渡す。 ・・・ぐらいです。上記に興味があって、不明点の質問があれば聞いてください。 **【追記】** gentamura さんのレスを見て気が付いたのですが、 に書いてあったことをそのまま自分の環境で試してみたいということだったようですね。 記事のajax通信で取得する]ボタンをクリックすると問題なく通信に成功して情報を取得できるのですが、それは下の画像の赤枠で囲った部分がキモです。 ![イメージ説明 ボタンをクリックすると記事に書いてある通り jQuery ajax を使って要求が送信しようとします。以下の画像がボタンクリックでのブラウザ ⇔ サーバー間の要求。応答をキャプチャしたものです。 !イメージ説明 赤枠で囲った部分は jQuery ajax で要求した URL ですが同一オリジンポリシー(詳しくは下記 URL 参照)に違反してないので通信に成功しています。 同一オリジンポリシー 同一オリジンポリシーを満足しない場合、HTML 5 の仕様 Cross-Origin Resource Sharing (CORS) を実装している新しいブラウザであれば、ブラウザは CORS のプロトコルに従って自動的に対処しようとします。 しかしながら、サーバー側で CORS に必要な応答ヘッダ返せるような対応がされてないと通信に失敗します。質問に書いてあったエラーメッセージ "No 'Access-Control-Allow-Origin' header is present on the requested resource." はそのことを言っています。 という訳で、参考にしている記事に書いてあったことをそのまま自分の環境で試してみたいということであれば、試験用に開発環境にサーバーを立てるなどの方法で同一オリジンポリシーを守れるように設定するということになります。