XMLHttpRequest no puede cargar una URL con jQuery

Estoy tratando de obtener algunos datos json de un sitio web “remoto”. Ejecuto mi servicio web en el puerto 99000 y luego lanzo mi sitio web en el puerto 99001 (http: // localhost: 99001 / index.html).

Recibo el siguiente mensaje:

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

Incluso si lanzo mi página web como un archivo HTML, obtengo esto:

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

El servicio web devuelve datos. Intento atrapar los elementos de datos como este:

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

Y estoy tratando de obtener esta estructura:

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

¿Sabes por qué estoy recibiendo este error?

No se puede hacer un dominio cruzado XMLHttpRequest, la única “opción” sería una técnica llamada JSONP, que se reduce a esto:

Para iniciar la solicitud: agregue una nueva etiqueta con la url remota, y luego asegúrese de que la URL remota devuelva un archivo JavaScript válido que llame a su función de callback. Algunos servicios lo admiten (y le permiten nombrar su callback en un parámetro GET).

La otra salida fácil sería crear un "proxy" en su servidor local, que recibe la solicitud remota y luego simplemente "reenvía" la contraseña a su javascript.

editar / agregar:

Veo que jQuery tiene soporte integrado para JSONP, al verificar si la URL contiene "callback =?" (donde jQuery reemplazará? con el método de callback real). Pero aún tendría que procesar eso en el servidor remoto para generar una respuesta válida.

En jQuery 1.5 nuevo, puede usar:

 $.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 con 3 soluciones de trabajo en acción.

Dado un JSON externo:

 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' 

Solución 1: $ .ajax () + jsonp:

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

Solución 2: $ .ajax () + json + & calback = ?:

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

Solución 3: $ .getJSON () + calback = ?:

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

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

Encontré una solución posible que no creo que se haya mencionado.

Aquí hay una buena descripción del problema: http://www.asp.net/web-api/overview/security/enabling-cross-origin-requests-in-web-api

Básicamente, siempre y cuando uses formularios / tipos de contenido codificado en url / texto sin formato, estás bien.

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

Lo uso con ASP.NET WebAPI2. Entonces en el otro extremo:

 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 esta forma, el formateador Json se usa al analizar el tipo de contenido de texto sin formato.

Y no lo olvides en Web.config:

        

Espero que esto ayude.

Estoy usando WebAPI 3 y estaba enfrentando el mismo problema. El problema se resolvió cuando @Rytis agregó su solución. Y creo que en WebAPI 3, no necesitamos definir el método RegisterWebApi .

Mi cambio fue solo en el archivo web.config y está funcionando.

       

Gracias por tu solución @Rytis!