web-dev-qa-db-fra.com

Demande Ajax Cross-Origin bloquée: la règle de même origine ne permet pas la lecture de la ressource distante

J'écris un site simple qui prend en entrée un idiome et renvoie son (ses) sens (s) et exemple (s) du dictionnaire Oxford. Voici mon idée:

J'envoie une demande à l'URL suivante:

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

Par exemple, si l'idiome est "ne va pas loin", j'enverrai une demande à:

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

Et je serai redirigé vers la page suivante:

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

Sur cette page, je peux extraire la signification et les exemples de l'idiome . Voici mon code pour les tests. Il va alerter l'URL de réponse:

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

Le problème est que j'ai une erreur: 

Demande d'origine croisée bloquée: la règle d'origine identique interdit la lecture de la ressource distante à l'adresse http://www.oxfordlearnersdictionaries.com/search/english/direct/?q=by+far ​​ . Cela peut être corrigé en déplaçant la ressource dans le même domaine ou en activant CORS.

Quelqu'un peut-il me dire comment résoudre ce problème, s'il vous plaît? Une autre approche convient également

jqueryajaxcross-domain
20
Newbie

Votre site Web appartient-il également au domaine oxfordlearnersdictionaries.com? ou si vous essayez d'appeler un domaine et que la même politique d'origine vous bloque? 

Sauf si vous avez l'autorisation de définir un en-tête via CORS sur le domaine oxfordlearnersdictionaries.com, vous souhaiterez peut-être envisager une autre approche. 

3
jsmartfo

JSONP ou "JSON avec remplissage" est une technique de communication utilisée dans les programmes JavaScript exécutés dans les navigateurs Web pour demander des données à un serveur appartenant à un domaine différent, ce qui est interdit par les navigateurs Web classiques en raison de la même règle d'origine. JSONP tire parti du fait que les navigateurs n'appliquent pas la règle de même origine sur les balises de script . Notez que pour que JSONP fonctionne, un serveur doit savoir comment répondre avec des résultats au format JSONP. JSONP ne fonctionne pas avec les résultats au format JSON.

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

Bonne réponse sur stackoverflow: jQuery AJAX cross domain

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

Nous ne pouvons pas obtenir les données d'un site Web tiers sans jsonp.

Vous pouvez utiliser la fonction php pour récupérer des données comme file_get_contents () ou CURL, etc.

Ensuite, vous pouvez utiliser l’URL PHP avec votre code 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>

Créez un fichier PHP = get_data.php

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

Placez sous la ligne en haut du fichier que vous appelez via AJAX.

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

Ajoutez le code ci-dessous à votre .htaccess

Ensemble d'en-têtes Access-Control-Allow-Origin *

Ça marche pour moi.

Merci

1
Shafiq

Ce besoin aussi.

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

Si votre site Web figure également sur le domaine oxfordlearnersdictionaries.com, UTILISEZ les éléments suivants dans le fichier .htaccess d’oxfordlearnersdictionaries.com:

Ensemble d'en-têtes Access-Control-Allow-Origin "*"

0
Nikhil Gyan

J'ai utilisé la méthode header("Access-Control-Allow-Origin: *"); mais j'ai quand même reçu l'erreur CORS. Il s'est avéré que le script PHP qui était demandé contenait une erreur (j'avais oublié d'ajouter un point (.) Lors de la concaténation de deux variables). Une fois que j'ai corrigé cette faute de frappe, ça a fonctionné!

Ainsi, il semble que le script distant appelé ne puisse contenir aucune erreur.

0
Arya

J'ai eu le même problème quand je travaillais sur asp.net Mvc webApi parce que cors n'était pas activé ..__ J'ai résolu cela en activant cors dans la méthode de registre de webApiconfig

Commencez par installer cors à partir de ici Puis

   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