4

estou em um projeto .NET, em que crio uma página de login e faço a verificação na DLL, e nesta verificação, é passado uma uma string de uma mensagem que eu preciso capturar com um TypeScript para dar o alerta. Esta mensagem já esta sendo enviada, e ela aparece la no header da página, assim que é feito um post.

Oque eu preciso agora é pegar essa mensagem para fazer um simples alert() e ela poder aparecer para o usuário.

Aqui está um print que mostra como está a mensagem no header:

inserir a descrição da imagem aqui

Eu só preciso pegá-la e fazer o alert.

Me ajudem por favor, Obrigado.

Eu já tentei este código:

var req = new XMLHttpRequest();
    req.open('GET', document.location.href, false);
    req.send(null);
    var headers = req.getAllResponseHeaders().toLowerCase();
    alert(headers);

desta pergunta https://stackoverflow.com/questions/220231/accessing-the-web-pages-http-headers-in-javascript

porém não me aparece a mensagem, apenas estes dados: inserir a descrição da imagem aqui

inserir a descrição da imagem aqui

NOTEI UAM COISA NO NETWORK

quando eu faço o post e ele retorna o alert, o network fica desta maneira: inserir a descrição da imagem aqui

Repare que há apenas 1 arquivo localhost

e quando eu clico no botao submit, aparece outro arquivo localhost que nao contem o header "mensagem":

inserir a descrição da imagem aqui

esse segundo é criado pelo código req.send(null);

Observem:

inserir a descrição da imagem aqui

O primeiro localhost contem a mensagem, o ultimo é gerado pelo req.send(null);

No meu código TS la no sources, aparece o seguinte erro na linha:

req.open("HEAD", window.location.href, false);

Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.

EDIT:

No meu arquivo .cs, onde adiciono o header, tem o seguinte código:

public async Task OnPostAsync(PARAMETROS){
      CancellationTokenSource backGroundTask = new CancellationTokenSource();
      MobAtivacaoAcesso MobAtivacaoAcesso = new MobAtivacaoAcesso("X", "Z");

      await MobAtivacaoAcesso.AtivacaoVerificarAsync(PARAMETROS); 

      if (!String.IsNullOrEmpty(MobAtivacaoAcesso.MensagemTemporaria)){
          Response.Headers.Add("mensagem", MobAtivacaoAcesso.MensagemTemporaria);
      }

      return;
}
7
  • A requisição é assíncrona e você não está esperando uma resposta para executar o alert. Você precisa de uma função callback para ser executada quando a requisição estiver completa... A MDN é uma boa fonte e veja também a documentação da propriedade XMLHttpRequest.onreadystatechange Commented 22/05/2019 às 20:26
  • Caro @fernandosavio não é assincrona, o terceiro parâmetro é false no .open, indica sincrono, logo não e usado nem onload e nem onreadystatechange, recomendo que leia: pt.stackoverflow.com/a/116177/3635
    – Syzoth
    Commented 23/05/2019 às 15:22
  • Isso ai parece um problema no teu back-end, provavelmente vocË escreveu o header somente em GET, quando recebe o POST náo contem o HEADER
    – Syzoth
    Commented 23/05/2019 às 18:33
  • na verdade, coloquei o response.header.add() apenas eu uma public async Task OnPostAsync
    – user149429
    Commented 23/05/2019 às 18:48
  • 1
    Gente, desculpa os comentários.. Acabou sendo inútil pois não percebi que a chamada era síncrona. Obrigado @GuilhermeNascimento pelo esclarecimento e peço desculpas novamente pela falta de atenção. Commented 23/05/2019 às 19:36

2 Respostas 2

0

Primeiro, "mensagem" não é um header "valido", eu realmente não sei porque esta querendo fazer desta forma, os headers são instruções geralmente para navegador, o BODY do conteudo deveria ser o local para usar algo assim, como um JSON de resposta, não vejo porque querer reinventar a roda.

Agora vamos ao problema, em um simples teste, com um código assim:

var request = new XMLHttpRequest;

request.open('GET', 'teste.php', false);

request.send(null);
console.log(request.getAllResponseHeaders());

Me foi retornado no console.log:

date: Thu, 23 May 2019 15:33:52 GMT
guilherme: brcontainer
server: Apache/2.4.3 (Win64)
content-type: text/html; charset=UTF-8
mensagem: teste
connection: Keep-Alive
keep-alive: timeout=5, max=99
content-length: 1

Ou seja foi retornado os headers corretamente, com alert também retornou perfeitamente:

exemplo de alert com resultado do XMLHttpRequest.getAllResponseHeaders

A prováveis explicações:

Esta usando domínios diferentes

Se estiver usando dominios diferentes, ou seja o Ajax esta em uma página e o link requisitado em outra, teria que setar o Access-Control-Expose-Headers com mensagem para ele expor o header customizado.

Esta usando algum add-on/extensão

Esta usando algum add-on/extensão que de alguma forma sobrescreve o transporte HTTP, devolvendo apenas o que é de interesse (esse é apenas especulação minha)

Seu navegador esta desatualizado

Por mais incrível que pareça, o teste que fiz foi no Chrome 74.0.3729.169 e funcionou perfeitamente


Para tentar resolver

Se já atualizou o Chrome para a ultima versão então crie uma página sem jQuery (não sei afirmar se o jQuery sobrescreve algo, mas hoje em dia não duvido de nada assim), um HTML vazio só com seu código básico e abra em uma aba anonima (garanta que nenhum add-on rode em privado), assim:

<html>
<body>
<script>
var request = new XMLHttpRequest;

request.open('GET', window.location.href, false);

request.send(null);
alert(request.getAllResponseHeaders());
</script>
</body>
</html>

Como pegar uma resposta sem usar os headers

Como disse no começo da resposta, pra que reinventar a roda, headers não validos geralmente usam o prefixo x-, que indica experimental ou "não padrão", é o seu caso, esse header seu mensagem foi inventado por ti, claro que funciona nos testes feitos, mas realmente não porque transformar uma bicicleta em uma "moto", primeiro, fora dos Web Workers não use XMLHttpRequet síncrono, use assíncrono, não tem haver com a solução, mas sim porque fora de Web Workers isso esta obsoleto, ainda funciona, mas é considerado assim. Então ao invés de pegar todos headers tente pegar somente o de interesse com request.getResponseHeader("mensagem")

Exemplo:

function resposta(url, callback)
{
    var request = new XMLHttpRequest;

    request.open('GET', url, true);//Terceiro parametro TRUE

    request.onreadystatechange = function () {
        //Se ainda não estiver concluido (diferente de 4) ele interrompe o script, irá tentar sozinho novamente em seguida
        if (request.readyState !== 4) return;

        callback(request.getResponseHeader("mensagem"));
    };

    request.send(null);
}

E para usar algo assim:

resposta(window.location.href, function (resposta) {
    alert(resposta);
});

Agora realmente se é um dado que vem do banco realmente não vejo porque fazer isso, o melhor é criar uma URL/rota só para isso, com uma resposta em TXT ou JSON, algo como:

    var request = new XMLHttpRequest;

    request.open('GET', 'status.aspx', true);//Pode ser uma rota se for asp.net-mvc

    request.onreadystatechange = function () {
          //Se ainda não estiver concluido (diferente de 4) ele interrompe o script, irá tentar sozinho novamente em seguida
          if (request.readyState !== 4) return;

          callback(request.responseText); //responseText retorna o BODY da resposta HTTP
    };

    request.send(null);

No teu status.aspx coloque o resultado do que seria a mensagem diretamente no corpo, algo como:

<% Response.Write("sua mensagem aqui"); %>

Erro nas rotas (no lado servidor)

Provavelmente seu erro esta nas rotas, a página que esta, a página antes da chamada XMLHttpRequest esta em POST e quando chama com XMLHttpRequest esta usando GET, logo provavelmente alguma configuração sua nisto que fez o header ser apenas enviado quando POST.

15
  • Ótima resposta, Guilherme, esclareceu muitas das minhas dúvidas e você me deu várias alternativas para fazer isso. Vou fazer alguns testes para ver se funcionou e dou um retorno aqui... Mas só para esclarecer mais sobre o projeto, é um projeto .net core razor e oque eu estou fazendo é o seguinte, no arquivo .cs do meu index, eu faço, dentro do método onPostAsync, uma verificação de outro método, que nao esta neste mesmo arquvo, para fazer a verificação se o usuário é valido ou nao, se permite acesso e tal, e este método me retorna uma string, que é a mensagem que eu passo no header
    – user149429
    Commented 24/05/2019 às 15:08
  • @SamuelMachado seria legal colocar parte desse código, tanto do GET quanto do POST, do .net core, na pergunta
    – Syzoth
    Commented 24/05/2019 às 15:10
  • E eu passo ela da seguinte maneira: Response.Headers.Add("mensagem", MobAtivacaoAcesso.MensagemTemporaria); E isso adiciona la no Response Header... (foi a pedido da empresa que fosse passado por la). Agora o que preciso fazer é só mostrar a mensagem, por enquanto em um simples alert() para o usuário, e não vejo maneira melhor do que usando o TypeScript
    – user149429
    Commented 24/05/2019 às 15:11
  • não deu para escrever tudo em uma só mensagem, desculpe, se preferir, coloco na pergunta sim
    – user149429
    Commented 24/05/2019 às 15:13
  • @SamuelMachado sim, pode editar a pergunta quantas vezes achar necessário e colocar esses detalhes lá
    – Syzoth
    Commented 24/05/2019 às 15:16
0

Por que o alert está mostrando um header diferente da resposta eu não consigo te dizer, mas do jeito que você está fazendo não irá funcionar mesmo, porque o JS não espera a resposta da sua requisição para continuar executando a próxima linha de código, quando você faz o alert, a resposta do servidor ainda não chegou.

Para executar uma linha de código apenas depois que a resposta chegar, você precisa colocar essas linhas dentro de uma função, e então passar essa função para a propriedade onload da requisição. Quando a resposta chegar, essa função será invocada automaticamente.

var req = new XMLHttpRequest();
    req.open('GET', document.location.href, false);
    req.onload = function() {
        var headers = req.getAllResponseHeaders().toLowerCase();
        alert(headers);
    }
    req.send(null);
8
  • mas o alert está sim funcionando e mostrando os headers... só nao aparece a "mensagem", que é oque eu iria precisar para passar para o usuário. Do seu jeito também funcionou, mas me trouxe as mesmas informações do jeito que eu estava fazendo... ou seja, meu problema ainda não foi solucionado....
    – user149429
    Commented 22/05/2019 às 19:58
  • Ao que me parece, não dá para dizer qual o seu erro apenas pelo que foi postado. Talvez tenha alguma outra requisição no seu código com o mesmo nome. Talvez o seu header não esteja sendo exposto por causa da política de origem cruzada, e você precise configurar no seu servidor um header chamado Access-Control-Expose-Headers para que o navegador permita a leitura do header message.
    – Andre
    Commented 22/05/2019 às 20:05
  • Acredito que req.onreadystatechange é a propriedade correta, mas a ideia é essa... Commented 22/05/2019 às 20:28
  • @fernandosavio e user140828 somente se for assíncrono irá usar onreadystatechange ou onload (ambos funcionam), o código do autor da pergunta é síncrono, logo não usa onreadystatechange, claro que XmlHttpRequest síncrono é voltado atualmente para Web Workers, para o processo principal ele é obsoleto, e deve-se então neste caso sempre usar assíncrono. Mas no geral o código esta correto. Uma leitura de uma resposta que formulei: pt.stackoverflow.com/a/116177/3635
    – Syzoth
    Commented 23/05/2019 às 15:20
  • preciso que este alert apareça logo após um POST, em que será verificado se o usuário existe na base de dados. e o alert servirá para retornar a mensagem à ele (se o acesso foi permitido ou não, se está bloqueado, etc...).
    – user149429
    Commented 23/05/2019 às 15:44

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