How to make ajax calls through the reverse proxy in an elegant way?

9

I have a project that validates, in JavaScript, the structure of a JSON. Here is more or less the structure I had used to do the asynchronous redemption of the structure, as well as what would be the static redemption for a default structure of 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>

When I try to do this directly, uploading the project to Tomcat, everything works. When I try behind Apache's reverse proxy, AJAX calls do not work properly, but direct access through <a href="/estrutura/condicao_pagamento.json"> everything works.

The reverse proxy settings I picked up from the default Apache Haus. Apache Modules I called:

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

Configuring proxy_html_module was the default, if I am not mistaken the signifier is this:

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

Reverse proxy configuration:

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>

In case, when rendering the page, Apache itself (as configured) interpreted the <a href> and made the replacement needed to run the test link. Then, when inspecting the element, it shows the following:

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

However, AJAX calls do not change, so it fails with 404.

Apache Call Log:

::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

I solved this problem by creating a base for AJAX:

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

And with the following setting in the AJAX call:

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

    /* ... */
  });
}

After this change, these are the Apache logs:

::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

My question is:

  • Is there a more elegant way to do AJAX through the reverse proxy?
  • If yes, what changes should I make to leave my original server agnostic for the existence of the reverse proxy (without the use of invisible tags)?
asked by anonymous 07.08.2018 / 22:35

0 answers