1. ホーム
  2. jquery

[解決済み】Ajaxクロスオリジンリクエストがブロックされました。同一生成元ポリシーがリモートリソースの読み取りを不許可にする

2022-02-19 23:14:13

質問

慣用句を入力すると、その意味と用例をOxford Dictionaryから返す簡単なサイトを作っています。以下は私のアイデアです。

以下のURLにリクエストを送ります。

http://www.oxfordlearnersdictionaries.com/search/english/direct/?q=[idiom]

例えば、「遠くへ行かない」という熟語なら、リクエストを送ります。

http://www.oxfordlearnersdictionaries.com/search/english/direct/?q=not+go+far

そして、次のページにリダイレクトされます。

http://www.oxfordlearnersdictionaries.com/definition/english/far_1#far_1__192

このページでは、その慣用句の意味と用例を抽出することができる。
以下はテスト用のコードです。これは応答URLを警告します。

<input id="idiom" type="text" name="" value="" placeholder="Enter your idiom here">
<br>
<button id="submit" type="">Submit</button>
<script type="text/javascript">
$(document).ready(function(){
    $("#submit").bind('click',function(){
        var idiom=$("#idiom").val();
        $.ajax({
            type: "GET",
            url: 'http://www.oxfordlearnersdictionaries.com/search/english/direct/',
            data:{q:idiom},
            async:true,
            crossDomain:true,
            success: function(data, status, xhr) {
                alert(xhr.getResponseHeader('Location'));
            }
        });
        
    });
});
</script>

問題は、エラーが出たことです。

クロスオリジンリクエストがブロックされました。同一生成元ポリシーにより、以下のリモートリソースの読み取りが許可されていません。 http://www.oxfordlearnersdictionaries.com/search/english/direct/?q=by+far . これは、リソースを同じドメインに移動するか、CORSを有効にすることで解決できます。

誰かこれを解決する方法を教えてください。
別のアプローチでも結構です。

解決方法は?

あなたのウェブサイトもoxfordlearnersdictionaries.comドメインにありますか?または、ドメインへの呼び出しを行おうとすると、同じ起源ポリシーがブロックされているのでしょうか?

oxfordlearnersdictionaries.comドメインのCORS経由でヘッダーを設定する許可を持っていない限り、別のアプローチを探した方がよいでしょう。