¿Por qué mi código JavaScript obtiene un error "No 'Access-Control-Allow-Origin' en el recurso solicitado" cuando Postman no lo hace?

Estoy tratando de hacer la autorización usando JavaScript conectando a la RESTful API construida en Flask. Sin embargo, cuando hago la solicitud, obtengo el siguiente error:

XMLHttpRequest no puede cargar http://myApiUrl/login. No 'Access-Control-Allow-Origin' la cabecera está presente en el recurso solicitado. Por lo tanto, no se permite el acceso a Origin 'null'.

Sé que la API o el recurso remoto deben establecer la cabecera, pero ¿por qué funcionó cuando hice la solicitud a través de la extensión de Chrome Postman?

Este es el código de la petición:

$.ajax({
    type: "POST",
    dataType: 'text',
    url: api,
    username: 'user',
    password: 'pass',
    crossDomain : true,
    xhrFields: {
        withCredentials: true
    }
})
    .done(function( data ) {
        console.log("done");
    })
    .fail( function(xhr, textStatus, errorThrown) {
        alert(xhr.responseText);
        alert(textStatus);
    });
Solución

Si lo he entendido bien estás haciendo una XMLHttpRequest a un dominio diferente al de tu página. Así que el navegador lo está bloqueando ya que normalmente permite una petición en el mismo origen por razones de seguridad. Tienes que hacer algo diferente cuando quieras hacer una petición entre dominios. Un tutorial sobre cómo lograrlo es Using CORS.

Cuando se usa postman no están restringidos por esta política. Citado de Cross-Origin XMLHttpRequest:

Las páginas web normales pueden usar el objeto XMLHttpRequest para enviar y recibir datos de servidores remotos, pero están limitadas por la misma política de origen. Las extensiones no están tan limitadas. Una extensión puede hablar con servidores remotos fuera de su origen, siempre que primero solicite permisos de origen cruzado.

Comentarios (15)

Si puedes lidiar con JSON a cambio, entonces intenta usar JSONP (nota la P al final) para hablar entre dominios:

$.ajax({
  type: "POST",
  dataType: 'jsonp',
  ...... etc ......

Más información sobre cómo trabajar con JSONP aquí:

La llegada de JSONP -esencialmente un hack consensuado de cross-site scripting- ha abierto la puerta a potentes mashups de contenido. Muchos sitios prominentes proporcionan servicios JSONP, permitiéndote acceder a su contenido a través de una API predefinida.

Comentarios (9)

Hay un problema de cruce de dominios usando Ajax. Debes estar seguro de que estás accediendo a tus archivos en la misma ruta http:// sin www. (o acceder desde http://www. y publicar en la misma ruta incluyendo www.) que el navegador considera como otro dominio cuando se accede a través de una ruta www., así que ya ves dónde está el problema. Usted está publicando en un dominio diferente y el navegador bloquea el flujo debido a la cuestión del origen.

Si la API no está colocada en el mismo host desde el que está solicitando, el flujo se bloquea, y tendrá que encontrar otra forma de comunicarse con la API.

Comentarios (1)