it-swarm.com.de

XMLHttpRequest kann keine URL mit jQuery laden

Ich versuche, einige JSON-Daten von einer "entfernten" Website abzurufen. Ich führe meinen Webdienst auf dem 99000-Port aus und starte dann meine Website auf dem 99001-Port (http: // localhost: 99001/index.html).

Ich erhalte folgende Nachricht:

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

Auch wenn ich meine Webseite als HTML-Datei starte, erhalte ich Folgendes:

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

Der Webdienst gibt Daten zurück. Ich versuche die Daten wie folgt zu erfassen:

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

Und ich versuche diese Struktur zu bekommen:

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

Wissen Sie, warum ich diesen Fehler erhalte?

55
Zakaria

Sie können keine XMLHttpRequest-Crossdomain erstellen. Die einzige "Option" wäre eine Technik namens JSONP.

So starten Sie die Anforderung: Fügen Sie ein neues <script> - Tag mit der Remote-URL hinzu, und stellen Sie dann sicher, dass die Remote-URL eine gültige Javascript-Datei zurückgibt, die Ihre Rückruffunktion aufruft. Einige Dienste unterstützen dies (und Sie können Ihren Rückruf in einem GET-Parameter benennen).

Der andere einfache Ausweg wäre, einen "Proxy" auf Ihrem lokalen Server zu erstellen, der die Remote-Anfrage erhält und sie dann einfach zurück an Ihr Javascript "weiterleitet".

edit/addition:

Ich sehe, dass jQuery JSONP unterstützt, indem überprüft wird, ob die URL "callback =?" Enthält. (Wo wird jQuery ersetzen? durch die eigentliche Rückrufmethode). Sie müssen dies jedoch noch auf dem Remote-Server verarbeiten, um eine gültige Antwort zu generieren.

39
CharlesLeaf

In neuem jQuery 1.5 können Sie verwenden:

$.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);
    }
})
34
Slav

Geige mit 3 funktionierenden Lösungen in Aktion.

Bei einem externen 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'

Lösung 1: $ .ajax () + jsonp:

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

Lösung 2: $ .ajax () + json + & calback = ?:

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

Lösung 3: $ .getJSON () + calback = ?:

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

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

19
Hugolpz

Es wurde eine mögliche Problemumgehung gefunden, von der ich nicht glaube, dass sie erwähnt wurde.

Hier finden Sie eine gute Beschreibung des Problems: http://www.asp.net/web-api/overview/security/enabling-cross-Origin-requests-in-web-api

Grundsätzlich ist alles in Ordnung, solange Sie Formulare/URL-codierte/Nur-Text-Inhaltstypen verwenden.

$.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));
    }
});     

Ich benutze es mit ASP.NET WebAPI2. Also am anderen Ende:

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"));
}

Auf diese Weise wird der Json-Formatierer beim Analysieren von Nur-Text-Inhaltstypen verwendet.

Und vergessen Sie nicht in der Web.config:

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

Hoffe das hilft.

6
Rytis

Ich verwende WebAPI 3 und stehe vor dem gleichen Problem. Das Problem wurde behoben, als @Rytis seine Lösung hinzufügte. Und ich denke, in WebAPI 3 müssen wir die Methode RegisterWebApi nicht definieren.

Meine Änderung war nur in der Datei web.config und funktioniert.

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

Danke für deine Lösung @Rytis!

0
Navin Pandit