javascript - jQuery cross domain POST shenanigans




json cross-domain (3)

Estoy intentando autenticarme en una API, que solo le permite autenticarse utilizando un POST con JSON como datos de formulario, en el formato de {"username": "myusername", "password": "mypassword"}.

Llevo dos días intentando que esto funcione con jQuery, pero tengo problemas porque es un dominio cruzado. ¿Cómo puedo lograr esto?

Mensaje de error:

Request Method:OPTIONS
Status Code:405 METHOD NOT ALLOWED

Código hasta ahora:

var username = "myusername";
var password = "mypass"
var authurl = "https://myurl";

$.ajax
({
    type: "POST",
    url: authurl,
    dataType: 'json',
    contentType: "application/json; charset=utf-8",
    async: false,
    data: {'json':'{"username":"' + username + '", "password":"' + password + '"}'},
    success: function (result) {
        $('#json').html(result);
    }
})

Para resumir:

  • API solo acepta POST para autenticación
  • API requiere json como datos de formulario, ejemplo: {"username": "myusername", "password": "mypassword"}
  • El js se ejecuta desde un dominio diferente, causando errores de dominio cruzado

Su ayuda es muy apreciada :)


Debes seguir un patrón diferente. Su JS local realizará una publicación ajax en una URL local que aceptará el método POST con sus datos json.

En este punto, el código de su servidor realizará una POST HTTP con los datos adecuados al servidor remoto, obtendrá la respuesta y la enviará al js que llama.


El problema es que el dominio en el que está intentando realizar la POST no responde a la solicitud de OPCIONES que se envía antes de cada solicitud de dominio cruzado. Con la solicitud de OPCIONES, el navegador recibe información sobre las reglas de dominios cruzados, etc. Para habilitar la solicitud de dominios cruzados, el servidor tiene que configurar Access-Control-Allow-Origin:* (o el dominio del script, en realidad, pero * cubre todo ) y tal vez Access-Control-Allow-Methods: GET, POST, OPTIONS headers.


Tengo un alojamiento compartido en GoDaddy. También necesitaba una respuesta a esta pregunta y, después de buscar alrededor, descubrí que es posible.

Escribí un archivo .htaccess, lo puse en la misma carpeta que mi página de acción. Aquí están los contenidos del archivo .htaccess:

Header add Access-Control-Allow-Origin "*"
Header add Access-Control-Allow-Headers "origin, x-requested-with, content-type"
Header add Access-Control-Allow-Methods "PUT, GET, POST, DELETE, OPTIONS"

Aquí está mi llamada ajax:

    $.ajax({
        url: 'http://www.mydomain.com/myactionpagefolder/gbactionpage.php',  //server script to process data
        type: 'POST',
        xhr: function() {  // custom xhr
            myXhr = $.ajaxSettings.xhr();
            if(myXhr.upload){ // check if upload property exists
                myXhr.upload.addEventListener('progress',progressHandlingFunction, false); // for handling the progress of the upload
            }
            return myXhr;
        },
        //Ajax events
        beforeSend: beforeSendHandler,
        success: completeHandler,
        error: errorHandler,
        // Form data
        data: formData,
        //Options to tell JQuery not to process data or worry about content-type
        cache: false,
        contentType: false,
        processData: false
    });

Ver este artículo para referencia:

El conjunto de encabezados Access-Control-Allow-Origin en .htaccess no funciona







cross-domain