XMLHttpRequest no puede cargar una URL con jQuery

Question

Estoy tratando de obtener algunos datos JSON desde un sitio web "a distancia". Tengo mi servicio web en el puerto 99000 a continuación, pongo en marcha mi página web en el puerto 99001 (http: // localhost: 99001 / index.html).

Me sale 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 pongo en marcha mi página web como un archivo HTML, me sale 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. Trato de atrapar a los elementos de datos de esta manera:

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 conseguir esta estructura:

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

¿Sabe por qué estoy recibiendo este error?

Answer 1

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

Para iniciar la solicitud: Añadir una nueva etiqueta <script> con la URL remota, y luego asegurarse de que la URL remoto devuelve un archivo JavaScript válido que llama a su función de devolución de llamada. Algunos servicios son compatibles con esta (y dejar el nombre de su devolución de llamada en unos parámetros GET).

El otro camino más fácil, sería la creación de un "proxy" en el servidor local, que recibe la solicitud remota y luego simplemente "hacia delante" de nuevo a su Javascript.

editar / adición:

Veo jQuery ha incorporado soporte para JSONP, comprobando si la URL contiene "devolución de llamada =?" (Donde jQuery reemplazará? Con el método de devolución de llamada real). Pero todavía había necesidad de que el proceso en el servidor remoto para generar una respuesta válida.

Answer 2

En el nuevo jQuery 1.5 se puede utilizar:

$.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

violín con 3 soluciones de trabajo en la 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 y callback = ?:

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

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

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

Documentación: http://api.jquery.com/jQuery.ajax/ , http://api.jquery.com/jQuery.getJSON/

Answer 4

Se han encontrado una posible solución alternativa que no creo que fue mencionado.

Esta es una descripción buena del problema: http://www.asp.net/web- api / overview / seguridad / habilitar-origen-solicitudes-en-web de la cruz-api

Básicamente, siempre y cuando se utiliza formas / tipos de contenido de texto con codificación URL / plain usted está muy 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. Así que 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 manera JSON formateador se acostumbra al analizar el tipo de contenido de texto sin formato.

Y no se olvide de Web.config:

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

Espero que esto ayude.

Answer 5

Estoy utilizando WebAPI 3 y estaba frente a la misma cuestión. La cuestión tiene como determinación @Rytis agregó su solución. Y creo que en WebAPI 3, no es necesario definir el método RegisterWebApi.

Mi cambio fue sólo en el archivo web.config y está trabajando.

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

Gracias por su solución @Rytis!