habilitar - Una solicitud CORS POST funciona desde JavaScript simple, pero ¿por qué no con jQuery?

enable-cors

Question

Estoy tratando de hacer una solicitud de envío de Cross Origin, y lo tengo trabajando en Javascript simple como este:

var request = new XMLHttpRequest();
var params = "action=something";
request.open(''POST'', url, true);
request.onreadystatechange = function() {if (request.readyState==4) alert("It worked!");};
request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
request.setRequestHeader("Content-length", params.length);
request.setRequestHeader("Connection", "close");
request.send(params);

Pero me gustaría usar jQuery, pero no puedo hacer que funcione. Esto es lo que intento:

$.ajax(url, {
    type:"POST",
    dataType:"json",
    data:{action:"something"}, 
    success:function(data, textStatus, jqXHR) {alert("success");},
    error: function(jqXHR, textStatus, errorThrown) {alert("failure");}
});

Esto resulta en una falla. Si alguien sabe por qué jQuery no funciona, háganoslo saber. Gracias.

(Estoy usando jQuery 1.5.1 y Firefox 4.0, y mi servidor responde con un encabezado de Access-Control-Allow-Origin adecuado)

Answer 1

ACTUALIZACIÓN: Como señaló TimK, esto ya no es necesario con jquery 1.5.2. Pero si desea agregar encabezados personalizados o permitir el uso de credenciales (nombre de usuario, contraseña o cookies, etc.), siga leyendo.

¡Creo que encontré la respuesta! (4 horas y muchas maldiciones después)

//This does not work!!
Access-Control-Allow-Headers: *

Necesita especificar manualmente todos los encabezados que aceptará (al menos ese fue el caso para mí en FF 4.0 y Chrome 10.0.648.204).

El método $ .ajax de jQuery envía el encabezado "x-requested-with" para todas las solicitudes de dominios cruzados (creo que es solo dominio cruzado).

Entonces, el encabezado faltante para responder a la solicitud de OPCIONES es:

//no longer needed as of jquery 1.5.2
Access-Control-Allow-Headers: x-requested-with

Si está pasando encabezados no "simples", deberá incluirlos en su lista (le envío uno más):

//only need part of this for my custom header
Access-Control-Allow-Headers: x-requested-with, x-requested-by

Para ponerlo todo junto, aquí está mi PHP:

// * wont work in FF w/ Allow-Credentials
//if you dont need Allow-Credentials, * seems to work
header(''Access-Control-Allow-Origin: http://www.example.com'');
//if you need cookies or login etc
header(''Access-Control-Allow-Credentials: true'');
if ($this->getRequestMethod() == ''OPTIONS'')
{
  header(''Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS'');
  header(''Access-Control-Max-Age: 604800'');
  //if you need special headers
  header(''Access-Control-Allow-Headers: x-requested-with'');
  exit(0);
}

Answer 2

Está enviando "params" en js: request.send(params);

pero "datos" en jquery ". ¿Están definidos los data:data, ? data:data,

Además, tiene un error en la URL:

$.ajax( {url:url,
         type:"POST",
         dataType:"json",
         data:data, 
         success:function(data, textStatus, jqXHR) {alert("success");},
         error: function(jqXHR, textStatus, errorThrown) {alert("failure");}
});

Está mezclando la sintaxis con la de $ .post

Actualización : estaba buscando en Google en función de la respuesta de monsur, y encontré que debe agregar Access-Control-Allow-Headers: Content-Type (a continuación se muestra el párrafo completo)

http://metajack.im/2010/01/19/crossdomain-ajax-for-xmpp-http-binding-made-easy/

Cómo funciona CORS

CORS funciona de manera muy similar al archivo crossdomain.xml de Flash. Básicamente, el navegador enviará una solicitud entre dominios a un servicio, configurando el origen del encabezado HTTP en el servidor solicitante. El servicio incluye algunos encabezados como Access-Control-Allow-Origin para indicar si se permite dicha solicitud.

Para los administradores de conexión BOSH, basta con especificar que todos los orígenes están permitidos, estableciendo el valor de Access-Control-Allow-Origin en *. El encabezado Content-Type también se debe incluir en la lista blanca en el encabezado Access-Control-Allow-Headers.

Finalmente, para ciertos tipos de solicitudes, incluidas las solicitudes del administrador de conexión BOSH, la verificación de permisos se realizará previamente. El navegador realizará una solicitud de OPCIONES y espera recuperar algunos encabezados HTTP que indican qué orígenes están permitidos, qué métodos están permitidos y cuánto durará esta autorización. Por ejemplo, aquí está lo que los parches de Punjab y ejabberd devolví para OPCIONES:

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, OPTIONS
Access-Control-Allow-Headers: Content-Type 
Access-Control-Max-Age: 86400

Answer 3

Otra posibilidad es que al establecer dataType: json provoque que JQuery envíe el Content-Type: application/json header. CORS lo considera un encabezado no estándar y requiere una solicitud de verificación previa de CORS. Entonces algunas cosas para probar:

1) Intente configurar su servidor para enviar las respuestas previas adecuadas. Esto tendrá la forma de encabezados adicionales como Access-Control-Allow-Methods y Access-Control-Allow-Headers .

2) Suelta el tipo de datos dataType: json configuración dataType: json . JQuery debe solicitar Content-Type: application/x-www-form-urlencoded de forma predeterminada, pero para estar seguro, puede reemplazar dataType: json con contentType: ''application/x-www-form-urlencoded''