XMLHttpRequest non può caricare un URL con jQuery

Question

Sto cercando di ottenere alcuni dati JSON da un sito web "a distanza". Corro il mio servizio web sulla porta 99000 poi, lancio il mio sito web sulla porta 99001 (http: // localhost: 99001 / index.html).

ottengo il seguente messaggio:

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

Anche Se io lancio la mia pagina web come file HTML, ottengo questo:

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

Il servizio Web restituisce i dati. Cerco di catturare gli elementi di dati in questo modo:

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

E sto cercando di ottenere tale struttura:

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

Sai perché sto ottenendo questo errore?

Answer 1

Non si può fare un crossdomain XMLHttpRequest, l'unica "opzione" sarebbe una tecnica chiamata JSONP, che si riduce a questo:

Per iniziare richiesta: Aggiungere una nuova variabile <script> con l'URL remoto, e quindi assicurarsi che l'URL remoto restituisce un file JavaScript valida che chiama la funzione di callback. Alcuni servizi supportano questa (e lasciate che il nome del tuo richiamata in un parametri GET).

L'altra via più facile, sarebbe quello di creare un "proxy" sul server locale, che ottiene la richiesta remota e poi semplicemente "avanti" di nuovo al vostro javascript.

modifica / aggiunta:

Vedo jQuery è dotato di supporto per JSONP, verificando se l'URL contiene "callback =?" (Dove jQuery sostituirà? Con il metodo di callback effettivo). Ma avresti ancora bisogno di processo che sul server remoto per generare una risposta valida.

Answer 2

Nel nuovo jQuery 1.5 è possibile utilizzare:

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

Answer 3

Fiddle con 3 soluzioni di lavoro in azione.

Dato un JSON esterna:

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'

Soluzione 1: $ .ajax () + jsonp:

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

Soluzione 2: $ .ajax () + + JSON & Calback = ?:

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

Soluzione 3: $ GetJSON () + = Calback ?:

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

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

Answer 4

Trovato una soluzione possibile che non credo è stato menzionato.

Ecco una descrizione buona del problema: http://www.asp.net/web- API / panoramica / security / abilitazione-cross-origine-richieste-in-web-api

In sostanza fino a quando si utilizzano i moduli / plain tipi codifica URL / content testo che si sta bene.

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

Io lo uso con ASP.NET WebAPI2. Così l'altra estremità:

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

In questo modo JSON formattatore viene utilizzato quando il parsing pianura tipo di contenuto del testo.

E non dimenticate nel web.config:

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

Spero che questo aiuti.

Answer 5

Sto usando WebAPI 3 e stavo affrontando lo stesso problema. La questione ha risolutezza come @Rytis aggiunto la sua soluzione. E penso che in WebAPI 3, non abbiamo bisogno di definire il metodo RegisterWebApi.

Il mio cambiamento era solo nel file web.config e sta lavorando.

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

Grazie per voi la soluzione @Rytis!