wake-up-neo.com

Ajax-Cross-Origin-Anforderung blockiert: Dieselbe Origin-Richtlinie verhindert das Lesen der Remote-Ressource

Ich schreibe eine einfache Website, die eine Redewendung verwendet und ihre Bedeutung (en) und Beispiele aus dem Oxford-Wörterbuch zurückgibt. Hier ist meine Idee:

Ich sende eine Anfrage an folgende URL:

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

Wenn die Redewendung beispielsweise "nicht weit gehen" ist, sende ich eine Anfrage an:

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

Und ich werde auf die folgende Seite weitergeleitet:

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

Auf dieser Seite kann ich die Bedeutung (en) und die Beispiele für das Idiom extrahieren. Hier ist mein Code zum Testen. Es wird die Antwort-URL benachrichtigt:

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

Das Problem ist, ich habe einen Fehler erhalten: 

Cross-Origin-Anforderung blockiert: Dieselbe Origin-Richtlinie verhindert das Lesen der Remote-Ressource unter http://www.oxfordlearnersdictionary.com/search/english/direct/?q=by+far ​​ . Dies kann behoben werden, indem Sie die Ressource in dieselbe Domäne verschieben oder CORS aktivieren.

Kann mir jemand sagen, wie ich das lösen kann? Eine andere Vorgehensweise ist auch in Ordnung

20
Newbie

Befindet sich Ihre Website auch auf der Domain oxfordlearnersdictionary.com? oder der Versuch, eine Domäne anzurufen, und dieselbe Origin-Richtlinie blockiert Sie? 

Wenn Sie nicht über die Berechtigung verfügen, den Header über CORS in der Domäne oxfordlearnersdictionary.com festzulegen, möchten Sie möglicherweise nach einem anderen Ansatz suchen. 

3
jsmartfo

JSONP oder "JSON with padding" ist eine Kommunikationstechnik, die in JavaScript-Programmen verwendet wird, die in Webbrowsern ausgeführt werden, um Daten von einem Server in einer anderen Domäne anzufordern. Dies wird von typischen Webbrowsern aufgrund der Origin-Richtlinie verboten. JSONP macht sich die Tatsache zunutze, dass Browser nicht die Same-Origin-Richtlinie für Skript-Tags erzwingen. Beachten Sie, dass ein Server wissen muss, wie er mit JSONP-formatierten Ergebnissen antworten kann, damit er funktionieren kann. JSONP funktioniert nicht mit JSON-formatierten Ergebnissen.

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

Gute Antwort auf stackoverflow: jQuery AJAX domänenübergreifend

   $.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'));
        }
    });
22
G.F.

Ohne jsonp können wir die Daten nicht von Websites Dritter erhalten.

Sie können die PHP-Funktion zum Abrufen von Daten wie file_get_contents () oder CURL usw. verwenden.

Dann können Sie die URL PHP mit Ihrem Ajax-Code verwenden.

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

Erstellen Sie eine PHP Datei = get_data.php

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

Platzieren Sie unter der Zeile oben in der Datei, die Sie über AJAX aufrufen.

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

Fügen Sie den folgenden Code zu Ihrem .htaccess hinzu

Kopfsatz Access-Control-Allow-Origin *

Für mich geht das.

Vielen Dank

1
Shafiq

Das braucht auch.

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

Wenn sich Ihre Website auch auf der Domäne oxfordlearnersdictionary.com befindet, VERWENDEN Sie die folgenden Dateien in der Datei oxfordlearnersdictionary.com.

Kopfsatz Access-Control-Allow-Origin "*"

0
Nikhil Gyan

Ich habe die header("Access-Control-Allow-Origin: *");-Methode verwendet, aber immer noch den CORS-Fehler erhalten. Es stellt sich heraus, dass das angeforderte PHP -Skript einen Fehler enthielt (ich hatte vergessen, einen Punkt (.) Hinzuzufügen, wenn zwei Variablen verkettet wurden). Nachdem ich diesen Tippfehler behoben hatte, funktionierte es!

Es scheint also, dass das entfernte Skript, das aufgerufen wird, keine Fehler enthalten kann.

0
Arya

Ich hatte das gleiche Problem, als ich an asp.net Mvc webApi arbeitete, weil cors nicht aktiviert war .. Ich löste dieses Problem, indem ich cors in der register-Methode von webApiconfig aktiviere

Installieren Sie zuerst die Kors von hier .__

   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