jQuery $ .ajax (), $ .post enviando "OPCIONES" como REQUEST_METHOD en Firefox

Tener problemas con lo que pensé que era un complemento jQuery relativamente simple ...

El complemento debe obtener datos de un script php a través de ajax para agregar opciones a <select>. La solicitud ajax es bastante genérica:

$.ajax({
  url: o.url,
  type: 'post',
  contentType: "application/x-www-form-urlencoded",
  data: '{"method":"getStates", "program":"EXPLORE"}',
  success: function (data, status) {
    console.log("Success!!");
    console.log(data);
    console.log(status);
  },
  error: function (xhr, desc, err) {
    console.log(xhr);
    console.log("Desc: " + desc + "\nErr:" + err);
  }
});

Esto parece funcionar bien en Safari. En Firefox 3.5, el REQUEST_TYPEen el servidor siempre es 'OPCIONES', y los datos $ _POST no aparecen. Apache registra la solicitud como tipo 'OPCIONES':

::1 - - [08/Jul/2009:11:43:27 -0500] "OPTIONS sitecodes.php HTTP/1.1" 200 46

¿Por qué esta llamada ajax funcionaría en Safari, pero no en Firefox, y cómo lo soluciono para Firefox?

Encabezados de respuesta
Fecha: miércoles, 08 de julio de 2009 21:22:17 GMT
Servidor: Apache / 2.0.59 (Unix) PHP / 5.2.6 DAV / 2
Desarrollado por X: PHP / 5.2.6
Contenido-Longitud 46
Tiempo de espera de Keep-Alive = 15, max = 100
Conexión Keep-Alive
Tipo de contenido text / html

Solicitar encabezados
Formulario de pedido de host: 8888
User-Agent Mozilla / 5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv: 1.9.1) Gecko / 20090624 Firefox / 3.5
Acepte text / html, application / xhtml + xml, application / xml; q = 0.9, * / *; q = 0.8
Accept-Language en-us, en; q = 0.5
Aceptar-codificar gzip, desinflar
Aceptar-Charset ISO-8859-1, utf-8; q = 0.7, *; q = 0.7
Keep-Alive 300
Conexión para mantener vivo
Origen http://ux.inetu.act.org
Método de solicitud de control de acceso POST
Acceso-Control-Solicitud-Encabezados x-solicitado-con

Aquí hay una imagen de la salida de Firebug:

La razón del error es la misma política de origen. Solo le permite hacer solicitudes XMLHTTP a su propio dominio. Vea si puede usar una devolución de llamada JSONP en su lugar:

$.getJSON( 'http://<url>/api.php?callback=?', function ( data ) { alert ( data ); } );

Usé el siguiente código en el lado de Django para interpretar la solicitud de OPCIONES y configurar los encabezados de control de acceso requeridos. Después de esto, mis solicitudes de dominio cruzado de Firefox comenzaron a funcionar. Como se dijo antes, el navegador primero envía la solicitud de OPCIONES y luego inmediatamente después de la POST / GET

def send_data(request):
    if request.method == "OPTIONS": 
        response = HttpResponse()
        response['Access-Control-Allow-Origin'] = '*'
        response['Access-Control-Allow-Methods'] = 'POST, GET, OPTIONS'
        response['Access-Control-Max-Age'] = 1000
        # note that '*' is not valid for Access-Control-Allow-Headers
        response['Access-Control-Allow-Headers'] = 'origin, x-csrftoken, content-type, accept'
        return response
    if request.method == "POST":
        # ... 

Editar: parece ser que, al menos en algunos casos, también debe agregar los mismos encabezados de Control de acceso a la respuesta real. Esto puede ser un poco confuso, ya que la solicitud parece tener éxito, pero Firefox no pasa el contenido de la respuesta al Javascript.

Este artículo del centro de desarrolladores de mozilla describe varios escenarios de solicitud entre dominios. El artículo parece indicar que una solicitud POST con el tipo de contenido de 'application / x-www-form-urlencoded' debe enviarse como una 'solicitud simple' (sin solicitud de OPCIONES 'preflight'). Sin embargo, descubrí que Firefox envió la solicitud de OPCIONES, aunque mi POST se envió con ese tipo de contenido.

Pude hacer que esto funcionara creando un controlador de solicitud de opciones en el servidor, que estableció el encabezado de respuesta 'Access-Control-Allow-Origin' en '*'. Puede ser más restrictivo configurándolo en algo específico, como ' http://someurl.com '. Además, he leído que, supuestamente, puede especificar una lista separada por comas de orígenes múltiples, pero no pude hacer que esto funcione.

Una vez que Firefox recibe la respuesta a la solicitud OPTIONS con un valor aceptable de 'Acceso-Control-Permitir-Origen', envía la solicitud POST.

He solucionado este problema utilizando una solución completamente basada en Apache. En mi vhost / htaccess pongo el siguiente bloque:

# enable cross domain access control
Header always set Access-Control-Allow-Origin "*"
Header always set Access-Control-Allow-Methods "POST, GET, OPTIONS"

# force apache to return 200 without executing my scripts
RewriteEngine On
RewriteCond %{REQUEST_METHOD} OPTIONS
RewriteRule .* / [R=200,L]

Es posible que no necesite la última parte, dependiendo de lo que suceda cuando Apache ejecute su script de destino. El crédito va a la gente amigable de ServerFault para la última parte.

Este PHP en la parte superior del script de respuesta parece funcionar. (Con Firefox 3.6.11. Todavía no he hecho muchas pruebas).

header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: POST, GET, OPTIONS');
header('Access-Control-Max-Age: 1000');
if(array_key_exists('HTTP_ACCESS_CONTROL_REQUEST_HEADERS', $_SERVER)) {
    header('Access-Control-Allow-Headers: '
           . $_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']);
} else {
    header('Access-Control-Allow-Headers: *');
}

if("OPTIONS" == $_SERVER['REQUEST_METHOD']) {
    exit(0);
}

Tuve el mismo problema con el envío de solicitudes a Google Maps, y la solución es bastante simple con jQuery 1.5: para uso de tipo de datos dataType: "jsonp"

El culpable es la solicitud de verificación previa utilizando el método OPTIONS

Para los métodos de solicitud HTTP que pueden causar efectos secundarios en los datos del usuario (en particular, para métodos HTTP que no sean GET, o para el uso POST con ciertos tipos MIME), la especificación exige que los navegadores "realicen una verificación previa" de la solicitud, solicitando métodos compatibles del servidor con un método de solicitud de OPCIONES HTTP, y luego, tras la "aprobación" del servidor, enviando la solicitud real con el método de solicitud HTTP real.

Las especificaciones web se refieren a: https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

Resolví el problema agregando las siguientes líneas en Nginx conf.

    location / {
               if ($request_method = OPTIONS ) {
                   add_header Access-Control-Allow-Origin  "*";
                   add_header Access-Control-Allow-Methods "POST, GET, PUT, UPDATE, DELETE, OPTIONS";
                   add_header Access-Control-Allow-Headers "Authorization";
                   add_header Access-Control-Allow-Credentials  "true";
                   add_header Content-Length 0;
                   add_header Content-Type text/plain;
                   return 200;
               }
    location ~ ^/(xxxx)$ {
                if ($request_method = OPTIONS) {
                    rewrite ^(.*)$ / last;
                }
    }

Estaba buscando en la fuente 1.3.2, cuando utilizo JSONP, la solicitud se realiza creando un elemento SCRIPT dinámicamente, que supera la política del mismo dominio de los navegadores. Naturalmente, no puede realizar una solicitud POST utilizando un elemento SCRIPT, el navegador obtendrá el resultado utilizando GET.

Como está solicitando una llamada JSONP, el elemento SCRIPT no se genera, porque solo lo hace cuando la llamada Tipo de AJAX se establece en GET.

http://dev.jquery.com/ticket/4690

Tuvimos un problema como este con ASP.Net. Nuestro IIS devolvía un error interno del servidor cuando intentaba ejecutar un jQuery $.postpara obtener contenido html debido a que PageHandlerFactory estaba restringido para responder soloGET,HEAD,POST,DEBUG verbos. Para que pueda cambiar esa restricción agregue el verbo "OPCIONES" a la lista o seleccione "Todos los verbos"

Puede modificar eso en su Administrador de IIS, seleccionando su sitio web, luego seleccionando Asignaciones de controladores, haga doble clic en su PageHandlerFactory para los archivos * .apx según lo necesite (Usamos el grupo de aplicaciones integrado con framework 4.0). Haga clic en Solicitar restricciones, luego vaya a Verbos Tabn y aplique su modificación.

Ahora nuestra $.postsolicitud está funcionando como se esperaba :)

Compruebe si la actionURL de su formulario incluye la wwwparte del dominio, mientras que la página original que ha abierto se ve sin ella www.

Típicamente hecho para URL canónicas.

Luché durante horas antes de tropezar con este artículo y encontré la indirecta de Cross Domain.

Parece que si o.url = 'index.php'y este archivo existe está bien y devuelve un mensaje de éxito en la consola. Devuelve un error si uso url:http://www.google.com

Si realiza una solicitud posterior, ¿por qué no utiliza directamente el método $ .post ?

$.post("test.php", { func: "getNameAndTime" },
    function(data){
        alert(data.name); // John
        console.log(data.time); //  2pm
    }, "json");

Es mucho más simple.

He publicado un claro ejemplo de cómo resolver esto si controlas el código del servidor del dominio al que estás PUBLICANDO. Esta respuesta se trata en este hilo, pero esto lo explica más claramente en mi opinión.

¿Cómo envío una solicitud POST entre dominios a través de JavaScript?

La solución a esto es:

1. use dataType: json
2. añadir &callback=?a tu url

esto funcionó para llamar a la API de Facebook y con Firefox. Firebug se está utilizando en GETlugar de OPTIONScon las condiciones anteriores (ambas).

Otra posibilidad para eludir el problema es usar un script proxy. Ese método se describe por ejemplo aquí

¿Puedes probar esto sin

contentType:application/x-www-form-urlencoded

Intenta agregar la opción:

dataType: "json"

 function test_success(page,name,id,divname,str)
{ 
 var dropdownIndex = document.getElementById(name).selectedIndex;
 var dropdownValue = document.getElementById(name)[dropdownIndex].value;
 var params='&'+id+'='+dropdownValue+'&'+str;
 //makerequest_sp(url, params, divid1);

 $.ajax({
    url: page,
    type: "post",
    data: params,
    // callback handler that will be called on success
    success: function(response, textStatus, jqXHR){
        // log a message to the console
        document.getElementById(divname).innerHTML = response;

        var retname = 'n_district';
        var dropdownIndex = document.getElementById(retname).selectedIndex;
        var dropdownValue = document.getElementById(retname)[dropdownIndex].value;
        if(dropdownValue >0)
        {
            //alert(dropdownValue);
            document.getElementById('inputname').value = dropdownValue;
        }
        else
        {
            document.getElementById('inputname').value = "00";
        }
        return;
        url2=page2; 
        var params2 = parrams2+'&';
        makerequest_sp(url2, params2, divid2);

     }
});         
}

Tuve un problema similar al intentar usar la API de Facebook.

El único tipo de contenido que no envió la solicitud Preflight parecía ser solo texto / sin formato ... no el resto de los parámetros mencionados en Mozilla aquí

• ¿Por qué es este el único navegador que hace esto?
• ¿Por qué Facebook no conoce y acepta la solicitud de verificación previa?

FYI: El documento de Moz mencionado anteriormente sugiere que los encabezados de X-Lori deberían desencadenar una solicitud Preflight ... no lo hace.

Necesita hacer un trabajo en el lado del servidor. Veo que está utilizando PHP en el lado del servidor, pero la solución para la aplicación web .NET está aquí: no se puede establecer el tipo de contenido en 'application / json' en jQuery.ajax

Haga lo mismo en el script PHP y funcionará. Simplemente: en la primera solicitud, el navegador pregunta al servidor si puede enviar dichos datos con ese tipo y la segunda solicitud es la correcta / permitida.

Intenta agregar lo siguiente:

dataType: "json",
ContentType: "application/json",
data: JSON.stringify({"method":"getStates", "program":"EXPLORE"}),  

Utilicé una URL de proxy para resolver un problema similar cuando quiero publicar datos en mi servidor apache alojado en otro servidor. (Puede que esta no sea la respuesta perfecta, pero resuelve mi problema).

Siga esta URL: Utilizando Mode-Rewrite para proxy , agrego esta línea a mi httpd.conf:

 RewriteRule ^solr/(.*)$ http://ip:8983/solr$1 [P]

Por lo tanto, puedo publicar datos en / solr en lugar de publicar datos en http: // ip: 8983 / solr / *. Luego publicará datos en el mismo origen.

Ya tengo este código manejando bien mi situación de cors en php:

header( 'Access-Control-Allow-Origin: '.CMSConfig::ALLOW_DOMAIN );
header( 'Access-Control-Allow-Headers: '.CMSConfig::ALLOW_DOMAIN );
header( 'Access-Control-Allow-Credentials: true' );

Y funcionaba bien local y remotamente, pero no para cargas cuando es remoto.

Algo sucede con apache / php O mi código, no me molesté en buscarlo, cuando solicitas OPCIONES, devuelve mi encabezado con reglas de cors pero con un resultado 302. Por lo tanto, mi navegador no reconoce como una situación aceptable.

Lo que hice, basado en la respuesta de @Mark McDonald, fue poner este código después de mi encabezado:

if( $_SERVER['REQUEST_METHOD'] === 'OPTIONS' )
{
    header("HTTP/1.1 202 Accepted");
    exit;
}

Ahora, cuando lo solicite OPTIONS, solo enviará el encabezado y el resultado 202.

Por favor tenga en cuenta:

JSONP solo admite el método de solicitud GET.

* Enviar solicitud por firefox : *

$.ajax({
   type: 'POST',//<<===
   contentType: 'application/json',
   url: url,
   dataType: "json"//<<=============
    ...
});

Solicitud anterior enviada por OPTIONS (while ==> type: 'POST' ) !!!!

$.ajax({
    type: 'POST',//<<===
    contentType: 'application/json',
    url: url,
    dataType: "jsonp"//<<==============
    ...
});

Pero por encima de la solicitud enviada por GET (while ==> type: 'POST' ) !!!!

Cuando esté en "comunicación entre dominios", preste atención y tenga cuidado.