XMLHttpRequest ne peut pas charger une URL avec jQuery

Je vais essayer d'obtenir certaines données json à partir d'une "distance" du site web.
Je lance mon service web sur le 99000 port, puis, j'ai lancer mon site sur le 99001 port (http://localhost:99001/index.html).

Je reçois le message suivant:

    XMLHttpRequest cannot load http://localhost:99000/Services.svc/ReturnPersons. Origin http://localhost:99001 is not allowed by Access-Control-Allow-Origin.

Même Si je lance ma page web dans un fichier HTML, j'obtiens ceci:

    XMLHttpRequest cannot load http://localhost:99000/Services.svc/ReturnPersons.Origin null is not allowed by Access-Control-Allow-Origin.

Le service web renvoie des données. J'essaie de capter les éléments de données comme ceci:

var url = "http://localhost:99000/Services.svc/ReturnPersons";
$.getJSON(url, function (data) {
success: readData(data)
});
function readData(data) {
    alert(data[0].FirstName);
}

Et je vais essayer d'obtenir cette structure:

[{"FirstName":"Foo","LastName":"Bar"},{"Hello":"Foo","LastName":"World"}]

Savez-vous pourquoi j'obtiens cette erreur?

InformationsquelleAutor Zakaria | 2010-09-30
  1. 39

    Vous ne pouvez pas faire un XMLHttpRequest crossdomain, la seule "option" serait une technique appelée JSONP, ce qui revient à ceci:

    De démarrage: Ajouter un nouveau <script> de la balise avec l'url distante, puis assurez-vous que l'url distante retourne valide d'un fichier javascript qui appelle la fonction de rappel. Certains services de soutien (et laissez-vous le nom de votre rappel dans un des paramètres).

    L'autre voie facile, serait de créer un "proxy" sur votre serveur local, qui reçoit la demande à distance et puis tout simplement "en avant" sur votre javascript.

    edit/ajout:

    Je vois jQuery a un support intégré pour JSONP, en vérifiant si l'URL contient "callback=?" (où jQuery va le remplacer ? avec la méthode de rappel). Mais vous auriez encore besoin de processus que sur le serveur distant pour générer une réponse valide.

    • J'ai résolu le problème en ajoutant le "&callback=?" à l'URL. Merci!!!!
    • Dois-je le préciser ou mettre en œuvre quoi que ce soit dans le script de serveur sur le serveur distant?
    • Oui, lorsque votre serveur renvoie normalement une chaîne JSON, par exemple {"foo": "bar"} vous devez envelopper la chaîne json dans un rappel de la méthode (fonction javascript) qui gère la réponse json. par exemple, myFunction({"foo": "bar"});
    • Charles de la Feuille, en fait vous vous trompez. Il y a un autre "option" qui est appelé la SCRO. Checkout comment l'activer ici: enable-cors.org
    • Vous avez raison portforwardpodcast, mais lorsque cette question a été demandé à l'origine en 2010 de la SCRO a moins de succès (pour être juste, l'une que je n'avais jamais entendu parler à l'époque) et tout l'appui IE6 a été abandonnée par la plupart, il y a encore une demande à l'appui de IE7 qui ne prend pas en charge la SCRO et IE8 ne supporte partiellement. Donc, en fonction de vos exigences, c'est très valable (et mieux) option oui.
    InformationsquelleAutor CharlesLeaf
  2. 34

    Dans de nouveaux jQuery 1.5 vous pouvez utiliser:

    $.ajax({
    type: "GET",
    url: "http://localhost:99000/Services.svc/ReturnPersons",
    dataType: "jsonp",
    success: readData(data),
    error: function (xhr, ajaxOptions, thrownError) {
      alert(xhr.status);
      alert(thrownError);
    }
})
    • Ne devrait-il pas être juste "succès: readData"?
    • J'ai une erreur comme SyntaxError: Unexpected token :
    • je suis, devinant c'est extra ":" dans votre réponse. pourriez-vous collez tout le message ?
    InformationsquelleAutor
  3. 19

    Jouer avec 3 solutions de travail dans l'action.

    Donnée externe JSON:

    myurl = 'http://wikidata.org/w/api.php?action=wbgetentities&sites=frwiki&titles=France&languages=zh-hans|zh-hant|fr&props=sitelinks|labels|aliases|descriptions&format=json'

    Solution 1: $.ajax() + jsonp:

    $.ajax({
  dataType: "jsonp",
  url: myurl ,
  }).done(function ( data ) {
  //do my stuff
});

    Solution 2: $.ajax()+json+&calback=?: 

    $.ajax({
  dataType: "json",
  url: myurl + '&callback=?',
  }).done(function ( data ) {
  //do my stuff
});

    Solution 3: $.getJSON()+calback=?:

    $.getJSON( myurl + '&callback=?', function(data) {
  //do my stuff
});

    Documentations: http://api.jquery.com/jQuery.ajax/ , http://api.jquery.com/jQuery.getJSON/

    • JSfiddle fixes à la suite #wikidata les changements de l'API, jsfiddle amélioration fait, rédaction d'amélioration de la faire!!!
    • Ne fonctionne pas dans HTTPS. Cliquez sur le lien pour voir jsfiddle.net/HNPyc/98
    • lorsque vous êtes sur https violon vous ne pouvez pas demander http wikidata ou autres http, ce serait une violation de la sécurité. Vous pouvez faire http-http, https https ou http-https, pas de https-http. C'est une fonctionnalité de sécurité, pas une croix de domaine en question.
    InformationsquelleAutor Hugolpz
  4. 6

    Trouvé une solution de contournement possible que je ne crois pas, a été évoqué.

    Ici est une bonne description du problème:
    http://www.asp.net/web-api/overview/security/enabling-cross-origin-requests-in-web-api

    Fondamentalement, aussi longtemps que vous utilisez des formulaires/url-encodé/texte les types de contenu vous sont beaux.

    $.ajax({
    type: "POST",
    headers: {
        'Accept': 'application/json',
        'Content-Type': 'text/plain'
    },
    dataType: "json",
    url: "http://localhost/endpoint",
    data: JSON.stringify({'DataToPost': 123}),
    success: function (data) {
        alert(JSON.stringify(data));
    }
});

    - Je l'utiliser avec ASP.NET WebAPI2. Donc, à l'autre extrémité:

    public static void RegisterWebApi(HttpConfiguration config)
{
    config.MapHttpAttributeRoutes();

    config.Formatters.Clear();
    config.Formatters.Add(new JsonMediaTypeFormatter());

    config.Formatters.JsonFormatter.SupportedMediaTypes.Add(new MediaTypeHeaderValue("text/plain"));
}

    De cette façon, Json formateur obtient utilisés lors de l'analyse de texte simple type de contenu.

    Et n'oubliez pas dans le Web.config:

    <system.webServer>
<httpProtocol>
  <customHeaders>
    <add name="Access-Control-Allow-Origin" value="*" />
    <add name="Access-Control-Allow-Methods" value="GET, POST" />
  </customHeaders>
</httpProtocol>

    Espère que cette aide.

    InformationsquelleAutor Rytis
  5. 0

    Je suis en utilisant WebAPI 3 et a été confronté au même problème. Le problème a résoudre @Rytis ajouté sa solution. Et je pense que dans WebAPI 3, nous n'avons pas besoin de définir la méthode de RegisterWebApi.

    Mon changement était seulement dans le web.fichier de configuration et de travail.

    <httpProtocol>
 <customHeaders>
 <add name="Access-Control-Allow-Origin" value="*" />
 <add name="Access-Control-Allow-Methods" value="GET, POST" />
</customHeaders>
</httpProtocol>

    Merci pour vous la solution de @Rytis!

    InformationsquelleAutor Navin Pandit