AJAX no Chrome enviando OPÇÕES em vez de GET / POST / PUT / DELETE?

Estou trabalhando em um aplicativo da web interno no trabalho. No IE10, as solicitações funcionam bem, mas no Chrome todas as solicitações AJAX (que existem muitas) são enviadas usando OPTIONS em vez de qualquer método definido que eu forneça. Tecnicamente, minhas solicitações são de "domínio cruzado". O site é servido em localhost: 6120 e o serviço para o qual estou fazendo solicitações AJAX está em 57124. Esse bug fechado do jquery define o problema, mas não é uma correção real.

O que posso fazer para usar o método http adequado em solicitações ajax?

Editar:

Isso está no carregamento do documento de cada página:

jQuery.support.cors = true;

E todo AJAX é construído de forma semelhante:

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"
});

O Chrome está testando a solicitação para procurar cabeçalhos CORS . Se a solicitação for aceitável, ele enviará a solicitação real. Se estiver fazendo isso entre domínios, você simplesmente terá que lidar com isso ou então encontrar uma maneira de tornar a solicitação não entre domínios. É por isso que o bug do jQuery foi fechado como não corrigido. Isso ocorre por design.

Ao contrário das solicitações simples (discutidas acima), as solicitações "preflighted" primeiro enviam uma solicitação HTTP pelo método OPTIONS para o recurso no outro domínio, a fim de determinar se a solicitação real é segura para envio. As solicitações entre sites são verificadas dessa forma, pois podem ter implicações nos dados do usuário. Em particular, uma solicitação é testada se:

• Ele usa métodos diferentes de GET, HEAD ou POST. Além disso, se POST for usado para enviar dados de solicitação com um tipo de conteúdo diferente de application / x-www-form-urlencoded, multipart / form-data ou text / plain, por exemplo, se a solicitação POST enviar uma carga XML para o servidor usando application / xml ou text / xml, a solicitação é testada.
• Ele define cabeçalhos personalizados na solicitação (por exemplo, a solicitação usa um cabeçalho como X-PINGOTHER)

Com base no fato de que a solicitação não é enviada na porta padrão 80/443, esta chamada Ajax é considerada automaticamente uma solicitação de recurso de origem cruzada (CORS) , o que em outras palavras significa que a solicitação emite automaticamente uma solicitação OPTIONS que verifica Cabeçalhos CORS no lado do servidor / servlet.

Isso acontece mesmo se você definir

crossOrigin: false;

ou mesmo se você omitir.

A razão é simplesmente essa localhost != localhost:57124. Tente enviar apenas para localhostsem a porta - irá falhar, porque o destino solicitado não será alcançável, porém observe que se os nomes de domínio forem iguais a solicitação é enviada sem a solicitação OPTIONS antes do POST.

Eu concordo com Kevin B, o relatório de bug diz tudo. Parece que você está tentando fazer chamadas Ajax entre domínios. Se você não estiver familiarizado com a política de mesma origem, pode começar aqui: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Same_origin_policy_for_JavaScript .

Se não for uma chamada ajax de domínio cruzado, tente tornar seu URL de destino relativo e ver se o problema desaparece. Se você estiver realmente desesperado, dê uma olhada no JSONP, mas cuidado, o caos se esconde. Não há muito mais que possamos fazer para ajudá-lo.

Se for possível, passe os parâmetros por meio de GET / POST regular com um nome diferente e deixe o código do lado do servidor lidar com isso.

Tive um problema semelhante com meu próprio proxy para ignorar o CORS e recebi o mesmo erro de POST-> OPTION no Chrome. Era o Authorizationcabeçalho no meu caso ( "x-li-format"e "X-UserName"aqui no seu caso). Acabei passando em um formato fictício (por exemplo, AuthorizatinJackem GET) e mudei o código do meu proxy para transformá-lo em um cabeçalho ao fazer a chamada para o destino . Aqui está em PHP:

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

No meu caso estou chamando uma API hospedada pela AWS (API Gateway). O erro aconteceu quando tentei chamar a API de um domínio diferente do próprio domínio da API. Como sou o proprietário da API, habilitei o CORS para o ambiente de teste, conforme descrito na documentação da Amazon .

Na produção este erro não acontecerá, pois a requisição e a api estarão no mesmo domínio.

Espero que ajude!

Como respondido por @Dark Falcon, simplesmente resolvi o problema .

No meu caso, estou usando o servidor node.js e criando uma sessão se ela não existir. Como o método OPTIONS não contém os detalhes da sessão, ele acaba criando uma nova sessão para cada solicitação do método POST.

Portanto, em minha rotina de aplicativo para criar sessão se não existir, acabei de adicionar uma verificação para ver se o método é OPTIONSe, se for, apenas pule a parte de criação da sessão:

    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(); 
        }
    }

As solicitações "preflighted" enviam primeiro uma solicitação HTTP pelo método OPTIONS para o recurso no outro domínio, a fim de determinar se a solicitação real é segura para envio. Solicitações entre sites

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

Considere o uso de axios

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

  if(res.data.error) {

  } else { 
    doAnything( res.data )
  }

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

Eu tive esse problema usando fetch e axios funcionou perfeitamente.

Eu encontrei um problema muito semelhante. Passei quase meio dia para entender por que tudo funciona corretamente no Firefox e falha no Chrome. No meu caso, foi por causa de campos duplicados (ou talvez digitados incorretamente) no cabeçalho da minha solicitação.

Use fetch em vez de XHR, então a solicitação não será pré-iluminada, mesmo que seja de vários domínios.

 $.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);
            }
        });

o contentType: 'text / plain; charset = utf-8 ', ou apenas contentType:' text / plain ', funciona para mim! Saudações!!