XMLHttpRequest ne peut pas charger une URL avec jQuery

Question

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?

Answer 1

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

Pour démarrer demande: 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.

Answer 2

Dans le nouveau jQuery 1.5, vous pouvez utiliser:

 $.ajax({
    type: "GET",
    url: "http://localhost:99000/Services.svc/ReturnPersons",
    dataType: "jsonp",
    success: readData(data)
})
 

Answer 3

Jouer avec 3 solutions de travail en 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/

Answer 4

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

Voici 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 que vous êtes 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érons que cette aide.