para - xmlhttprequest javascript example

XMLHttpRequest cambia POST a OPCIÓN

Question

tengo este código:

net.requestXHR = function() {
    this.xhr = null;
    if(window.XMLHttpRequest === undefined) {
        window.XMLHttpRequest = function() {
            try {
                // Use the latest version of the activex object if available
                this.xhr = new ActiveXObject("Msxml2.XMLHTTP.6.0");
            }
            catch(e1) {
                try {
                    // Otherwise fall back on an older version
                    this.xhr = new ActiveXObject("Mxsml2.XMLHTTP.3.0");
                }
                catch(e2) {
                    //Otherwise, throw an error
                    this.xhr = new Error("Ajax not supported in your browser");
                }
            }
        };
    }
    else
        this.xhr = new XMLHttpRequest();
}
net.requestXHR.prototype.post = function(url, data) {
    if(this.xhr != null) {
        this.xhr.open("POST", url);
        this.xhr.setRequestHeader("Content-Type", "application/json");
        this.xhr.send(data);
    }
}

    var rs = new net.requestSpeech();
    console.log(JSON.stringify(interaction));
    rs.post("http://localhost:8111", JSON.stringify(interaction));

cuando el envío se ejecuta, tengo este registro:

OPTIONS http://localhost:8111/ [HTTP/1.1 405 Method Not Allowed 74ms]

Y en localhost: 8111 tengo un reslet serverResource que acepta publicación, ¿es problema de la misma política de origen? he modificado el restlet para poner el encabezado allow-origin y lo pruebo con otra solicitud GET http (en jquery) y trabajo bien. Tengo el problema de resolver el mismo origen porque uso un navegador html5 y mi servidor pone los encabezados en la respuesta, entonces, ¿por qué el envío me muestra este error? ¿Por qué cambiar POST por OPCIÓN? ¡Gracias!

¿Posible duplicado ?: Creo que no, pero es verdad, el problema es el mismo para ambas preguntas, pero las mías se refieren desde la pregunta de que hay un problema con el navegador, y el otro, primero apunta a jquery. Por experiencia, el tiempo no cuenta para el duplicado, las respuestas son diferentes, pero es verdad que ambas preguntas se complementan entre sí.

Answer 1

Como otros han señalado, esto es algo CORS.

Esta es la forma de manejarlo en NGINX (basado en esta fuente ):

location / {
    if ($request_method = OPTIONS ) {
        add_header Access-Control-Allow-Origin "http://example.com";
        add_header Access-Control-Allow-Methods "GET, 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;
    }
}

Si desea permitir solicitudes CORS desde cualquier origen, reemplace,

add_header Access-Control-Allow-Origin "http://example.com";

con

add_header Access-Control-Allow-Origin "*";

Si no usa la autorización, no necesitará este bit:

add_header Access-Control-Allow-Headers "Authorization";
add_header Access-Control-Allow-Credentials "true";

Para la API que estoy desarrollando, necesitaba incluir en la lista blanca 3 métodos de solicitud: GET, POST y OPTIONS, y un encabezado X-App-Id , así que esto es lo que terminé haciendo:

if ($request_method = OPTIONS ) {
    add_header Access-Control-Allow-Origin "*";
    add_header Access-Control-Allow-Methods "GET, POST, OPTIONS";
    add_header Access-Control-Allow-Headers "X-App-Id";
    add_header Content-Length 0;
    add_header Content-Type text/plain;
    return 200;
}

Answer 2

Estaba teniendo este problema exacto de un código JavaScript que envió un contenido ajax.

Para permitir la Solicitud de Origen Cruzado con Preflight, tuve que hacer esto en .ASPX que recibía la petición:

//Check the petition Method
if (Request.HttpMethod == "OPTIONS")
{
    //In case of an OPTIONS, we allow the access to the origin of the petition
    string vlsOrigin = Request.Headers["ORIGIN"];
    Response.AddHeader("Access-Control-Allow-Origin", vlsOrigin);
    Response.AddHeader("Access-Control-Allow-Methods", "POST");
    Response.AddHeader("Access-Control-Allow-Headers", "accept, content-type");
    Response.AddHeader("Access-Control-Max-Age", "1728000");
}

Debe tener cuidado y verificar qué encabezados le pide su petición. Los revisé usando Fiddler.

Espero que esto sirva a alguien en el futuro.

Answer 3

Sí, este es un "problema con la política del mismo origen". Está realizando su solicitud a un servidor diferente o a un puerto diferente, lo que significa que se trata de una solicitud HTTP entre sitios. Esto es lo que la documentación tiene que decir sobre tales solicitudes:

Además, para los métodos de solicitud HTTP que pueden causar efectos secundarios en los datos del servidor (en particular, para los métodos HTTP distintos de GET o para el uso de POST con ciertos tipos MIME), la especificación exige que los navegadores "revisen previamente" la solicitud, solicitando métodos admitidos desde el servidor con un método de solicitud HTTP OPTIONS , y luego, tras la "aprobación" del servidor, enviando la solicitud real con el método de solicitud HTTP real.

Hay una descripción más detallada en el estándar CORS (sección "Solicitud de origen cruzado con verificación previa"). Su servidor necesita permitir la solicitud de OPTIONS y enviar una respuesta con los Access-Control-Allow-Headers Access-Control-Allow-Origin , Access-Control-Allow-Headers y Access-Control-Allow-Methods permiten la solicitud. Entonces el navegador hará la solicitud POST real.