AJAX in Chrome invia OPZIONI invece di GET / POST / PUT / DELETE?

Sto lavorando a un'applicazione web interna al lavoro. In IE10 le richieste funzionano bene, ma in Chrome tutte le richieste AJAX (che ce ne sono molte) vengono inviate utilizzando OPZIONI invece di qualunque metodo definito io fornisca. Tecnicamente le mie richieste sono "interdominio". Il sito è servito su localhost: 6120 e il servizio a cui sto inviando richieste AJAX è su 57124. Questo bug jquery chiuso definisce il problema, ma non una vera soluzione.

Cosa posso fare per utilizzare il metodo http corretto nelle richieste ajax?

Modificare:

Questo è nel caricamento del documento di ogni pagina:

jQuery.support.cors = true;

E ogni AJAX è costruito in modo simile:

var url = 'http://localhost:57124/My/Rest/Call';
$.ajax({
    url: url,
    dataType: "json",
    data: json,
    async: true,
    cache: false,
    timeout: 30000,
    headers: { "x-li-format": "json", "X-UserName": userName },
    success: function (data) {
        // my success stuff
    },
    error: function (request, status, error) {
        // my error stuff
    },
    type: "POST"
});

Chrome sta eseguendo il preflight della richiesta per cercare le intestazioni CORS . Se la richiesta è accettabile, invierà la richiesta reale. Se stai facendo questo cross-domain, dovrai semplicemente occupartene o trovare un modo per rendere la richiesta non cross-domain. Questo è il motivo per cui il bug di jQuery è stato chiuso come non risolto. Questo è di progettazione.

A differenza delle richieste semplici (discusse sopra), le richieste "preflight" inviano prima una richiesta HTTP mediante il metodo OPTIONS alla risorsa sull'altro dominio, al fine di determinare se la richiesta effettiva è sicura da inviare. Le richieste cross-site vengono preflight in questo modo poiché potrebbero avere implicazioni sui dati dell'utente. In particolare, viene eseguito il preflight di una richiesta se:

• Utilizza metodi diversi da GET, HEAD o POST. Inoltre, se POST viene utilizzato per inviare dati di richiesta con un Content-Type diverso da application / x-www-form-urlencoded, multipart / form-data o text / plain, ad esempio se la richiesta POST invia un payload XML al server utilizzando application / xml o text / xml, la richiesta viene sottoposta a preflight.
• Imposta intestazioni personalizzate nella richiesta (ad es. La richiesta utilizza un'intestazione come X-PINGOTHER)

Sulla base del fatto che la richiesta non viene inviata sulla porta predefinita 80/443, questa chiamata Ajax viene automaticamente considerata una richiesta di risorse cross-origin (CORS) , il che in altre parole significa che la richiesta emette automaticamente una richiesta OPTIONS che controlla Intestazioni CORS sul lato server / servlet.

Questo accade anche se imposti

crossOrigin: false;

o anche se lo ometti.

Il motivo è semplicemente quello localhost != localhost:57124. Prova a inviarlo solo a localhostsenza la porta - fallirà, perché il target richiesto non sarà raggiungibile, tuttavia nota che se i nomi di dominio sono uguali la richiesta viene inviata senza la richiesta OPTIONS prima del POST.

Sono d'accordo con Kevin B, il bug report dice tutto. Sembra che tu stia tentando di effettuare chiamate ajax interdominio. Se non hai familiarità con la stessa politica di origine, puoi iniziare da qui: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Same_origin_policy_for_JavaScript .

Se questa non deve essere una chiamata ajax interdominio, prova a rendere relativo l'URL di destinazione e verifica se il problema scompare. Se sei davvero disperato, guarda nel JSONP, ma attenzione, il caos è in agguato. Non c'è davvero molto altro che possiamo fare per aiutarti.

Se è possibile, passare i parametri tramite GET / POST regolare con un nome diverso e lasciare che il codice lato server lo gestisca.

Ho avuto un problema simile con il mio proxy per bypassare CORS e ho ricevuto lo stesso errore di POST-> OPTION in Chrome. Era l' Authorizationheader nel mio caso ( "x-li-format"e "X-UserName"qui nel tuo caso.) Ho finito per passarlo in un formato fittizio (ad esempio AuthorizatinJackin GET) e ho cambiato il codice per il mio proxy per trasformarlo in un'intestazione quando effettuo la chiamata alla destinazione . Eccolo in PHP:

if (isset($_GET['AuthorizationJack'])) {
    $request_headers[] = "Authorization: Basic ".$_GET['AuthorizationJack'];
}

Nel mio caso sto chiamando un'API ospitata da AWS (API Gateway). L'errore si è verificato quando ho provato a chiamare l'API da un dominio diverso dal dominio dell'API. Poiché sono il proprietario dell'API, ho abilitato CORS per l'ambiente di test, come descritto nella documentazione di Amazon .

In produzione questo errore non si verificherà, poiché la richiesta e l'API saranno nello stesso dominio.

Spero possa essere d'aiuto!

Alla risposta di @Dark Falcon, me ne sono occupata semplicemente .

Nel mio caso, sto utilizzando il server node.js e creo una sessione se non esiste. Poiché il metodo OPTIONS non contiene i dettagli della sessione, ha finito per creare una nuova sessione per ogni richiesta del metodo POST.

Quindi nella mia routine dell'app per creare-sessione-se-non-esiste, ho appena aggiunto un controllo per vedere se il metodo è OPTIONS, e in tal caso, salta semplicemente la parte di creazione della sessione:

    app.use(function(req, res, next) {
        if (req.method !== "OPTIONS") {
            if (req.session && req.session.id) {
                 // Session exists
                 next();
            }else{
                 // Create session
                 next();
          }
        } else {
           // If request method is OPTIONS, just skip this part and move to the next method.
           next(); 
        }
    }

Le richieste "preflight" inviano prima una richiesta HTTP con il metodo OPTIONS alla risorsa sull'altro dominio, al fine di determinare se la richiesta effettiva è sicura da inviare. Richieste cross-site

https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

Prendi in considerazione l'utilizzo di axios

axios.get( url,
{ headers: {"Content-Type": "application/json"} } ).then( res => {

  if(res.data.error) {

  } else { 
    doAnything( res.data )
  }

}).catch(function (error) {
   doAnythingError(error)
});

Ho avuto questo problema usando fetch e axios funzionava perfettamente.

Ho riscontrato un problema molto simile. Ho passato quasi mezza giornata a capire perché tutto funziona correttamente in Firefox e fallisce in Chrome. Nel mio caso è stato a causa di campi duplicati (o forse digitati in modo errato) nell'intestazione della mia richiesta.

Usa fetch invece di XHR, quindi la richiesta non verrà pre-illuminata anche se è cross-domain.

 $.ajax({
            url: '###',
            contentType: 'text/plain; charset=utf-8',
            async: false,
            xhrFields: {
                withCredentials: true,
                crossDomain: true,
                Authorization: "Bearer ...."
            },

            method: 'POST',

            data: JSON.stringify( request ),
            success: function (data) {
                console.log(data);
            }
        });

il contentType: 'text / plain; charset = utf-8 ', o solo contentType:' text / plain ', funziona per me! Saluti!!