14

Eu tenho um projeto que faz a validação, em JavaScript, da estrutura de um JSON. Aqui tem mais ou menos a estrutura que eu tinha usado para fazer o resgate da estrutura de maneira assíncrona, assim como o que seria o resgate estático para uma estrutura padrão de condicao_pagmento:

function faz_leitura() {
  let argonautas = JSON.parse(document.getElementById('entrada').value);
  let argonautas_keys = Object.keys(argonautas);
  
  let post_action = () => {
    console.log('pós-ação');
  };
  
  let missing_fetch = argonautas_keys.length;
    let fetch_hit = () => {
        missing_fetch--;
        if (missing_fetch == 0) {
            post_action();
        }
    };
  
  argonautas_keys.forEach(table_name => {
    let xhr = new XMLHttpRequest();
    let ajax_link = "/estrutura/" + table_name + ".json"
    xhr.open("GET", ajax_link);
    
    console.log("ajax " + ajax_link);
    
    xhr.onload = () => {
      console.log("sucesso");
      console.log(xhr.response);
      console.log(xhr.status);
      fetch_hit();
    };
    
    xhr.onerror = () => {
      console.log("falha");
      console.log(xhr.response);
      console.log(xhr.status);
      fetch_hit();
    };
    
    xhr.send();     
  });
}
<a href="/estrutura/condicao_pagamento.json">Link direto teste</a>
<div>
<textarea id="entrada" rows="4" cols="50">
{
  "condicao_pagamento": [
    {
      "cd_cond_pgto": "1",
      "ds_cond_pgto": "marmota"
    }
  ]
}
</textarea>
</div>
<div>
  <button onClick="faz_leitura()">Interpreta</button>
</div>

Quando tento fazer isso de maneira direta, subindo o projeto no Tomcat, tudo funciona. Quando tento por atrás do proxy reverso do Apache, as chamadas AJAX não funcionam adequamente, mas o acesso direto através do <a href="/estrutura/condicao_pagamento.json"> tudo funciona.

As configurações do proxy reverso eu peguei do padrão do Apache Haus. Módulos do Apache que liguei:

LoadModule proxy_module modules/mod_proxy.so
LoadModule proxy_html_module modules/mod_proxy_html.so
LoadModule proxy_http_module modules/mod_proxy_http.so
LoadModule proxy_http2_module modules/mod_proxy_http2.so
LoadModule xml2enc_module modules/mod_xml2enc.so

Configuração do proxy_html_module foi o padrão, se não me engano o significante é isto:

ProxyHTMLLinks  a       href
ProxyHTMLLinks  area        href
ProxyHTMLLinks  link        href
ProxyHTMLLinks  img     src longdesc usemap
ProxyHTMLLinks  object      classid codebase data usemap
ProxyHTMLLinks  q       cite
ProxyHTMLLinks  blockquote  cite
ProxyHTMLLinks  ins     cite
ProxyHTMLLinks  del     cite
ProxyHTMLLinks  form        action
ProxyHTMLLinks  input       src usemap
ProxyHTMLLinks  head        profile
ProxyHTMLLinks  base        href
ProxyHTMLLinks  script      src for

ProxyHTMLEvents onclick ondblclick onmousedown onmouseup \
        onmouseover onmousemove onmouseout onkeypress \
        onkeydown onkeyup onfocus onblur onload \
        onunload onsubmit onreset onselect onchange

Configuração do proxy reverso:

ProxyPass /testador-estrutura http://127.0.0.1:8080
ProxyPassReverse /testador-estrutura http://127.0.0.1:8080

<Location /testador-estrutura >
    ProxyPassReverse /
    ProxyHTMLEnable On
    ProxyHTMLURLMap http://127.0.0.1:8080/ /testador-estrutura/
    ProxyHTMLURLMap / /testador-estrutura/
</Location>

No caso, ao renderizar a página, o próprio Apache (como configurado) interpretou os <a href> e fez a substituição necessária para funcionar o link de teste. Então, ao inspecionar o elemento, ele mostra o seguinte:

<a href="/testador-estrutura/estrutura/condicao_pagamento.json">Link direto teste</a>

Porém, as chamadas AJAX não são alteradas e, portanto, ele falha com 404.

Log das chamadas no Apache:

::1 - - [07/Aug/2018:17:15:17 -0300] "GET /testador-estrutura/ HTTP/1.1" 304 -
::1 - - [07/Aug/2018:17:15:17 -0300] "GET /testador-estrutura/interpreter.js HTTP/1.1" 200 3739
::1 - - [07/Aug/2018:17:15:20 -0300] "GET /estrutura/condicao_pagamento.json HTTP/1.1" 404 244

Eu resolvi esse problema criando uma base para o AJAX:

<span style="display: none"><a href="/estrutura/" id="ajax-jeitinho"></a></span>

E com o seguinte ajuste na chamada do AJAX:

function faz_leitura() {
  let argonautas = JSON.parse(document.getElementById('entrada').value);
  let argonautas_keys = Object.keys(argonautas);

  let base_ajax = document.getElementById('ajax-jeitinho').attributes['href'].nodeValue;

  /* ... */

  argonautas_keys.forEach(table_name => {
    let xhr = new XMLHttpRequest();
    let ajax_link = base_ajax + table_name + ".json"
    xhr.open("GET", ajax_link);
    console.log("ajax " + ajax_link);

    /* ... */
  });
}

Após essa alteração, esses são os logs do Apache:

::1 - - [07/Aug/2018:17:20:31 -0300] "GET /testador-estrutura/ HTTP/1.1" 200 1089
::1 - - [07/Aug/2018:17:20:31 -0300] "GET /testador-estrutura/interpreter.js HTTP/1.1" 200 3722
::1 - - [07/Aug/2018:17:20:42 -0300] "GET /testador-estrutura/estrutura/condicao_pagamento.json HTTP/1.1" 200 161

Minha questão é:

  • tem algum jeito mais elegante de fazer o AJAX através do proxy reverso?
  • se sim, quais mudanças eu deveria fazer para deixar o meu servidor original agnóstico da existência do proxy reverso (sem o uso de tags invisíveis)?
7
  • Já pensou em utilizar o axiojs para requisições assíncronas: codeheaven.io/how-to-use-axios-as-your-http-client-pt da uma olhada nisso... espero ter ajudado. 11/11/2019 às 22:57
  • @RaphaelGodoi nem me passou pela cabeça. O projeto que estou fazendo é bem vanilla, sem framework algum além do que o browser me fornece. Vou ler o link e dou feedback 11/11/2019 às 23:19
  • 2
    @RaphaelGodoi aparentemente, isso não deixa mais elegante chamadas assíncronas pelo proxy reverso, sem falar que a versão minificada são 13kb a mais em uma página que mal uso 4.5kb. Não vi vantagens em colocar essa dependência no meu projeto. 12/11/2019 às 1:38
  • Acho que você consegue fazer o proxy reverso passar nos arquivos javascript da sua aplicação usando a diretiva Substitute – Segue o link de onde tirei esta informação: serverfault.com/questions/898898/… 6/04/2020 às 4:09
  • Provavelmente o navegador adiciona algumas headers quando você clica no link, que não são adicionadas quando você faz a chamada via AJAX, seria interessante você tentar verificar o que muda nas headers e até mesmo tentar simular a requisição por fora (em um postman/insomnia da vida). PS: a API mais "moderna" pra fazer o AJAX é o fetch() mas isso provavelmente não vai fazer diferença. axios = bullshit.
    – wkrueger
    1/10/2021 às 0:56

1 Resposta 1

-2

A configuração do proxy reverso no Apache pode afetar as chamadas AJAX, pois o proxy pode estar modificando o caminho das requisições.

A configuração do proxy_html_module pode estar afetando as URLs contidas no HTML, incluindo as URLs das chamadas AJAX. Verifique se as URLs das chamadas AJAX estão sendo modificadas corretamente pelo proxy.

Você pode tentar adicionar uma diretiva ProxyPass para passar as requisições para o servidor de aplicativos específico. Algo como:

ProxyPass /estrutura http://localhost:8080/estrutura

Isso fará com que todas as requisições para /estrutura sejam encaminhadas para o servidor de aplicativos local.

Além disso, você pode tentar desabilitar a configuração do proxy_html_module, removendo as linhas:

LoadModule proxy_html_module modules/mod_proxy_html.so

E as configurações relacionadas a ele no arquivo httpd.conf e verificar se isso resolve o problema.

É importante lembrar que a configuração do proxy reverso pode variar dependendo da sua implementação específica, então é importante verificar a documentação do Apache e verificar se está configurado corretamente.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .