web-dev-qa-db-fra.com

L'origine http: // localhost n'est pas autorisée par Access-Control-Allow-Origin.?

j'ai un problème ... j'essaye d'obtenir json api dans " http://api.master18.tiket.com/search/autocomplete/hotel?q = mah & token = 90d2fad44172390b11527557e6250e50 & secretkey = 83e2f0484edbd2ad6fc9888c1e30ea44 & output = json "

lorsque j'essaie de passer en mode hors ligne (cela signifie que je copie cette API json dans le bloc-notes et l'appelle dans mon hôte local) avec ce code ...

function getLast(){
        $.ajax({
            url:"http://localhost/tickets/json/api_airport.json",
            type:'GET',
            dataType:"json",
            success:function(data){console.log(data.results.result[1].category);}
        });
    }

il fonctionne parfaitement. :)

mais quand j'essaye de l'url réelle ("http://api.master18.tiket.com/search/autocomplete/hotel?q=mah&token=90d2fad44172390b11527557e6250e50&secretkey=83e2f0484edbd2ad6fc988888 = json ") avec ce code:

$.ajax({
            url:"http://api.master18.tiket.com/search/autocomplete/hotel?q=mah&token=90d2fad44172390b11527557e6250e50&secretkey=83e2f0484edbd2ad6fc9888c1e30ea44&output=json",
            type:'GET',
            crossDomain:true,
            beforeSend: function(x) {
                if(x && x.overrideMimeType) {
                    x.overrideMimeType("application/j-son;charset=UTF-8");
                }
            },
            success:function(data){console.log("Success");}
        });

puis dans mon google chrome console javascript, il y a une erreur comme celle-ci: "XMLHttpRequest ne peut pas charger http://api.master18.tiket.com/search/autocomplete/hotel? q = mah & token = 90d2fad44172390b11527557e6250e50 & secretkey = 83e2f0484edbd2ad6fc9888c1e30ea44 & output = json . Origin ( http: // localhost ) n'est pas autorisé par Access-Control-Allow-Origin. "

je sais, ce doit être un problème interdomaine, quelqu'un peut-il m'aider? nb: quelques morceaux de code, j'ai reçu de la communauté de débordement de pile .... merci :)

jqueryajaxjsonapi
24
Gregorius Airlangga

Vous avez deux façons d'aller de l'avant:

JSONP

Si cette API prend en charge JSONP, la façon la plus simple de résoudre ce problème consiste à ajouter &callback à la fin de l'URL. Vous pouvez également essayer &callback=. Si cela ne fonctionne pas, cela signifie que l'API ne prend pas en charge JSONP, vous devez donc essayer l'autre solution.

Script de proxy

Vous pouvez créer un script proxy sur le même domaine que votre site Web afin d'éviter les problèmes d'origine croisée. Cela ne fonctionnera qu'avec les URL HTTP, pas les URL HTTPS, mais il ne devrait pas être trop difficile de les modifier si vous en avez besoin.

<?php
// File Name: proxy.php
if (!isset($_GET['url'])) {
    die(); // Don't do anything if we don't have a URL to work with
}
$url = urldecode($_GET['url']);
$url = 'http://' . str_replace('http://', '', $url); // Avoid accessing the file system
echo file_get_contents($url); // You should probably use cURL. The concept is the same though

Ensuite, vous appelez simplement ce script avec jQuery. Assurez-vous de urlencode l'URL.

$.ajax({
    url      : 'proxy.php?url=http%3A%2F%2Fapi.master18.tiket.com%2Fsearch%2Fautocomplete%2Fhotel%3Fq%3Dmah%26token%3D90d2fad44172390b11527557e6250e50%26secretkey%3D83e2f0484edbd2ad6fc9888c1e30ea44%26output%3Djson',
    type     : 'GET',
    dataType : 'json'
}).done(function(data) {
    console.log(data.results.result[1].category); // Do whatever you want here
});

Le pourquoi

Vous obtenez cette erreur en raison de la même politique XMLHttpRequest Origin, qui se résume essentiellement à une restriction des demandes ajax aux URL avec un port, un domaine ou un protocole différent. Cette restriction est en place pour empêcher les attaques de script intersite (XSS).

Plus d'informations

Nos solutions contournent ces problèmes de différentes manières.

JSONP utilise la possibilité de pointer des balises de script sur JSON (enveloppé dans une fonction javascript) afin de recevoir le JSON. La page JSONP est interprétée comme javascript et exécutée. Le JSON est transmis à votre fonction spécifiée.

Le script proxy fonctionne en trompant le navigateur, car vous demandez en fait une page sur la même origine que votre page. Les demandes croisées d'origine se produisent côté serveur.

48
Nathaniel

J'ai corrigé cela (pour le développement) avec un simple proxy nginx ...

# /etc/nginx/sites-enabled/default
server {
  listen 80;
  root /path/to/Development/dir;
  index index.html;

  # from your example
  location /search {
    proxy_pass http://api.master18.tiket.com;
  }
}
4
jmervine

une lecture approfondie de jQuery AJAX cross domain semble indiquer que le serveur que vous interrogez renvoie une chaîne d'en-tête qui interdit les requêtes json inter-domaines. Vérifiez les en-têtes de la réponse que vous recevez pour voir si l'en-tête Access-Control-Allow-Origin est défini et si sa valeur limite les demandes interdomaines à l'hôte local.

2
Ben West