XMLHttpRequest kann keine URL mit jQuery laden
-
26-09-2019 - |
Frage
Ich versuche, einige json Daten von einer „remote“ Website. Ich betreiben meinen Web-Dienst auf dem 99000-Anschluss dann starte ich meine Website auf dem 99001-Port (http: // localhost: 99001 / index.html).
ich die folgende Meldung:
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 zu starten, bekomme ich diese:
XMLHttpRequest cannot load http://localhost:99000/Services.svc/ReturnPersons.Origin null is not allowed by Access-Control-Allow-Origin.
Der Webservice liefert Daten. Ich versuche, die Datenelemente, wie diese zu fangen:
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 erhalten:
[{"FirstName":"Foo","LastName":"Bar"},{"Hello":"Foo","LastName":"World"}]
Weißt du, warum ich diesen Fehler bin immer?
Lösung
Sie können keine XMLHttpRequest domänenübergreif tun, die einzige „Option“ wäre eine Technik sein JSONP genannt, was kommt auf diese:
Anfrage zu starten: Hinzufügen einen neuen <script>
Tag mit der Remote-URL, und stellen Sie sicher, dass Remote-URL gibt eine gültige JavaScript-Datei, die Ihre Callback-Funktion aufruft. Einige Dienste unterstützen diese (und lassen Sie Ihren Rückruf in einer GET-Parameter nennen).
Der andere einfache Ausweg wäre einen „Proxy“ auf dem lokalen Server zu erstellen, die die Remote-Anfrage bekommt und dann nur „vorwärts“, um sie Ihren Javascript zurück.
Bearbeiten / Zusatz:
Ich sehe jQuery hat eine integrierte Unterstützung für JSONP, indem geprüft wird, ob die URL enthält „Rückruf =?“ (Wo jQuery ersetzt? Mit der tatsächlichen Callback-Methode). Aber Sie würden immer noch verarbeiten müssen, dass auf dem Remote-Server eine gültige Antwort zu erzeugen.
Andere Tipps
In neuen jQuery 1.5 Sie verwenden können:
$.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);
}
})
Fiddle mit 3 Arbeitslösungen in Aktion.
Da ein externer 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: $ Schnipsel () + JSONP:
$.ajax({
dataType: "jsonp",
url: myurl ,
}).done(function ( data ) {
// do my stuff
});
Lösung 2: $ Schnipsel () + 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/
Gefunden eine mögliche Abhilfe, dass ich glaube nicht erwähnt wurde.
Hier ist eine gute Beschreibung des Problems: http://www.asp.net/web- api / Übersicht / Sicherheit / Aktivierung-Cross-Origin-requests-in-web-api
Im Grunde genommen, solange Sie Formulare / url-encoded / Klartext Content-Typen Sie sind in Ordnung.
$.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 Json Formatierer verwendet wird, wenn Klartext Inhaltstyp Parsen.
Und vergessen Sie nicht in Web.config:
<system.webServer>
<httpProtocol>
<customHeaders>
<add name="Access-Control-Allow-Origin" value="*" />
<add name="Access-Control-Allow-Methods" value="GET, POST" />
</customHeaders>
</httpProtocol>
Hope, das hilft.
Ich bin mit WebAPI 3 und wurde mit dem gleichen Problem konfrontiert. Die Frage hat Entschlossenheit als @Rytis seine Lösung gegeben. Und ich denke, in WebAPI 3, haben wir nicht Methode RegisterWebApi
müssen definiert werden.
Meine Änderung war nur in web.config-Datei und arbeitet.
<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!