web-dev-qa-db-ja.com

Ajax Cross-Origin Request Blocked：Same Origin Policyは、リモートリソースの読み取りを許可しません

私は入力としてイディオムを取り、オックスフォード辞書からその意味と例を返すシンプルなサイトを書いています。私のアイデアは次のとおりです。

次の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>

問題は、エラーがあることです：

Cross-Origin Request Blocked：Same Origin Policyは http://www.oxfordlearnersdictionaries.com/search/english/direct/?q=by+far​​ でリモートリソースの読み取りを許可しません。これは、リソースを同じドメインに移動するか、CORSを有効にすることで修正できます。

誰でもこれを解決する方法を教えてもらえますか？別のアプローチも問題ありません

jqueryajaxcross-domain
28
Newbie

あなたのウェブサイトもoxfordlearnersdictionaries.comドメインにありますか？または、ドメインへの呼び出しを試みて、同じOriginポリシーがあなたをブロックしていますか？

Oxfordlearnersdictionaries.comドメインでCORSを介してヘッダーを設定する権限がない場合は、別のアプローチを探してください。

4
jsmartfo

JSONPまたは「JSON with padding」は、異なるドメインのサーバーからデータを要求するためにWebブラウザーで実行されるJavaScriptプログラムで使用される通信技術です。 JSONPは、ブラウザがスクリプトタグに同一生成元ポリシーを適用しないという事実を利用しています。 JSONPが機能するには、サーバーがJSONP形式の結果で応答する方法を知っている必要があることに注意してください。 JSONPはJSON形式の結果では機能しません。

http://en.wikipedia.org/wiki/JSONP

Stackoverflowの良い答え： jQuery AJAX_クロスドメイン

   $.ajax({
        type: "GET",
        url: 'http://www.oxfordlearnersdictionaries.com/search/english/direct/',
        data:{q:idiom},
        async:true,
        dataType : 'jsonp',   //you may use jsonp for cross Origin request
        crossDomain:true,
        success: function(data, status, xhr) {
            alert(xhr.getResponseHeader('Location'));
        }
    });
23
G.F.

Jsonpなしでは、サードパーティのWebサイトからデータを取得することはできません。

Php関数を使用して、file_get_contents（）やCURLなどのデータを取得できます。

次に、PHP urlをajaxコードで使用できます。

<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: 'get_data.php',
            data:{q:idiom},
            async:true,
            crossDomain:true,
            success: function(data, status, xhr) {
                alert(xhr.getResponseHeader('Location'));
            }
        });

    });
});
</script>

PHPファイルを作成する= get_data.php

<?php
  echo file_get_contents("http://www.oxfordlearnersdictionaries.com/search/english/direct/");
?>
9
Raju Rajpurohit

AJAXを使用して呼び出しているファイルの上部の行の下に配置します。

header("Access-Control-Allow-Origin: *");
7
AndyPHP

Webサイトがoxfordlearnersdictionaries.comドメインにもある場合は、以下をoxfordlearnersdictionaries.com .htaccessファイルに使用します。

ヘッダーセットAccess-Control-Allow-Origin "*"

2
Nikhil Gyan

以下のコードを.htaccessに追加します

ヘッダーセットAccess-Control-Allow-Origin *

わたしにはできる。

ありがとう

2
Shafiq

これも必要です。

<?php
header("Access-Control-Allow-Origin: *");
0
user1476842

header("Access-Control-Allow-Origin: *");メソッドを使用しましたが、CORSエラーを受け取りました。要求されていたPHPスクリプトにエラーがあったことがわかりました（2つの変数を連結するときにピリオド（。）を追加するのを忘れていました）。そのタイプミスを修正すると、うまくいきました！

そのため、呼び出されるリモートスクリプトにはエラーを含めることができないようです。

0
Arya

Corsが有効になっていないため、asp.net Mvc webApiで作業していたときに同じ問題が発生しました。 webApiconfigのregisterメソッド内でcorsを有効にすることでこれを解決しました

最初に here からcorsをインストールします

   public static void Register(HttpConfiguration config)
    {
        // Web API configuration and services

        var cors = new EnableCorsAttribute("*", "*", "*");
        config.EnableCors(cors);



        config.EnableCors();
        // Web API routes
        config.MapHttpAttributeRoutes();

        config.Routes.MapHttpRoute(
            name: "DefaultApi",
            routeTemplate: "api/{controller}/{id}",
            defaults: new { id = RouteParameter.Optional }
        );
    }
0
TAHA SULTAN TEMURI