Não passar o header para o servidor

[guilhermecostalopes]

Tenho este código no angular:

import { RequestOptions, Headers } from '@angular/http';

const createDefaultHeaders = function() {
  let token = 'Bearer ' + localStorage.getItem('token');
  let headers = new Headers(
  //  { 'Content-Type': 'application/json', 'Authorization': localStorage.getItem('token') }

    {
      'Content-Type': 'application/json', 
      'Authorization': localStorage.getItem('token'),
      'Accept': 'application/json',
      'Access-Control-Allow-Origin': '*',
      'Access-Control-Allow-Credentials': 'true'
    }

  );
  let options = new RequestOptions({ headers: this.headers });
  return options;
};

export const REQUEST_OPTIONS_DEFAULT: Function = createDefaultHeaders;

Código java com spring

String requestHeader = null;
		System.out.println("O header é nulo? "
				+ request.getHeader("Authorization") == null);
		if (request.getHeader("Authorization") != null) {
			System.out.println("O que tem dentro do header? "
					+ request.getHeader("Authorization"));
			requestHeader = "Bearer " + request.getHeader("Authorization");
		}

		logger.debug("Autenticação de processamento para '{}'",
				request.getRequestURL());

A variável requestHeader sempre fica nulo.

Tem um tempo que estou fazendo com mock, mas não consegui resolver.

[wmartins]

Possivelmente tem um typo no teu código, primeiro, tu constrói o objeto headers (let headers = new Headers(...)), porém, ao utilizar, tu está utilizando o valor vindo de this.headers (provavelmente com o valor undefined):

import { RequestOptions, Headers } from '@angular/http';

const createDefaultHeaders = function() {
  let token = 'Bearer ' + localStorage.getItem('token');
  // CONSTRUÇÃO DOS HEADERS
  let headers = new Headers(
  //  { 'Content-Type': 'application/json', 'Authorization': localStorage.getItem('token') }

    {
      'Content-Type': 'application/json', 
      'Authorization': localStorage.getItem('token'),
      'Accept': 'application/json',
      'Access-Control-Allow-Origin': '*',
      'Access-Control-Allow-Credentials': 'true'
    }

  );
  // USO DOS HEADERS
  let options = new RequestOptions({ headers: this.headers });
  return options;
};

export const REQUEST_OPTIONS_DEFAULT: Function = createDefaultHeaders;

Acredito que tu só precisa mudar

let options = new RequestOptions({ headers: this.headers });

Por:

let options = new RequestOptions({ headers: headers });
// Equivalente, utilizando Object Rest/Spread
// let options = new RequestOptions({ headers });

[guilhermecostalopes]

Não adiantou

[phsantiago]

Depois que você exportou export const REQUEST_OPTIONS_DEFAULT: Function = createDefaultHeaders; onde você usa?

[guilhermecostalopes]

No código que eu postei.

const createDefaultHeaders = function() {

[phsantiago]

isso foi antes de exportar, aí você só definiu a função que vai retornar as opções já com os headers diferentes...
Tem que ver em qual parte do código você executa essa função

[guilhermecostalopes]

Não entendi sua pergunta @phsantiago

[phsantiago]

Então, você criou um módulo e exportou. Mas não mostrou o código que importa e usa isso!

[guilhermecostalopes]

Entendi, um exemplo:

import { Injectable, EventEmitter }  from '@angular/core';
import { Http, Response } from "@angular/http";
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/map';
import 'rxjs/add/observable/throw';

import { BASE_API_URL } from '../../base-api-url-defaul';
import { REQUEST_OPTIONS_DEFAULT } from '../../request-options.default';
import { AuthenticationService } from '../../authentication/authentication.service';
import { Empresa } from '../../../modelo/desif/empresa.model';

@Injectable()
export class EmpresaService {

  private base: string;
  private options: Function;

  constructor(
    private http: Http,
    private authenticationService: AuthenticationService,
  ) {
    this.base = BASE_API_URL + 'empresaRecurso';
    this.options = REQUEST_OPTIONS_DEFAULT;
  }

  getPesquisar(empresa : Empresa) {
    let url = this.base + "/buscar";
    return this.http.post(url, empresa,  this.options())
      .map((response: Response) => {
        console.log("Pesquisou por todas empresas " + response.status);
       return response.json();
      }
    ).catch((error:any) => 
      Observable.throw(error.json().error || 
      'Erro em buscar empresas ' + console.log(this.options))
    );
  }

  getAlterar(id : Number) {
    let url = this.base + "/alterar/" + id;
    return this.http.get(url,  this.options())
      .map((response: Response) => {
       return response.json();
      }
    ).catch((error:any) => 
      Observable.throw(error.json().error || 
      'Erro em buscar país pelo ID')
    );
  }

  getExcluir(id : Number) {
    let url = this.base + "/excluir/" + id;
    return this.http.get(url,  this.options())
      .map((response: Response) => {
       return response.json();
      }
    ).catch((error:any) => 
      Observable.throw(error.json().error || 
      'Erro em excluir país pelo ID')
    );
  }

  getSalvar(empresa : Empresa){
    let url = this.base + "/salvar";
    return this.http.post(url, empresa, this.options())
      .map(res=> res.json()
    ).catch((error:any) => 
      Observable.throw(error.json().error || 
      'Erro em salvar países')
    );
  }
}

[phsantiago]

Tenta ver se a saída desse código:

import { HttpHeaders } from '@angular/common/http';

const httpOptions = {
  headers: new HttpHeaders({
    'Content-Type':  'application/json',
    'Authorization': 'my-auth-token'
  })
};

Está igual a saída de REQUEST_OPTIONS_DEFAULT(). Se são objetos, se as keys tão iguais...

https://angular.io/guide/http#adding-headers

[guilhermecostalopes]

Não consegui implementar o que você informou, @phsantiago

Mas fiz assim e não funcionou, isto é, não chega no servidor.

import { Injectable }  from '@angular/core';
import { Http, Response, Headers } from "@angular/http";
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/map';
import 'rxjs/add/observable/throw';

import { BASE_API_URL } from '../../base-api-url-defaul';
import { AuthenticationService } from '../../authentication/authentication.service';

import { Pais } from '../../../modelo/endereco/pais.model';

@Injectable()
export class PaisService {
  
  private base: string;

  public headers = new Headers(
    {
        'Authorization': 'Bearer ' + localStorage.getItem('token')
    }
  );

  constructor(
    private http: Http,
    private authenticationService: AuthenticationService,
  ) {
    this.base = BASE_API_URL + 'paisRecurso';
  }

  getPesquisar(pais : Pais) {
    let url = this.base + "/buscar";
    return this.http.post(url, pais, {headers: this.headers})
      .map((response: Response) => {
        console.log("Pesquisou por todos países " + response.status);
       return response.json();
      }
    ).catch((error:any) => 
      Observable.throw(error.json().error || 
      'Erro em buscar países ' + console.log())
    );
  }

  getAlterar(id : Number) {
    let url = this.base + "/alterar/" + id;
    return this.http.get(url,  {headers: this.headers})
      .map((response: Response) => {
       return response.json();
      }
    ).catch((error:any) => 
      Observable.throw(error.json().error || 
      'Erro em buscar país pelo ID')
    );
  }

  getExcluir(id : Number) {
    let url = this.base + "/excluir/" + id;
    return this.http.get(url,  {headers: this.headers})
      .map((response: Response) => {
       return response.json();
      }
    ).catch((error:any) => 
      Observable.throw(error.json().error || 
      'Erro em excluir país pelo ID')
    );
  }

  getSalvar(pais : Pais){

    let url = this.base + "/salvar";
    return this.http.post(url, pais, {headers: this.headers})
      .map(res=> res.json()
    ).catch((error:any) => 
      Observable.throw(error.json().error || 
      'Erro em salvar países')
    );
  }
}

[guilhermecostalopes]

Imagens do navegador

[guilhermecostalopes]

O que pode ser ?

[wmartins]

@guilhermecostalopes, sugiro, se for possível, que tu coloque um pedaço funcional (apenas para reproduzir o problema, sem as tuas lógicas de negócio e etc) do código em algum repositório, junto com algumas instruções para reproduzir.

Podem ser várias coisas, como, por exemplo, uma versão específica de alguma lib que tu tá usando.
Tendo o repositório fica mais fácil de te ajudar, pois aí é possível reproduzir, mexer, testar e etc. Somente olhando assim, aparentemente o teu código está certo. :)

[guilhermecostalopes]

Correto.

O que necessita e eu monto amanhã e libero aqui.

Exemplo, posso liberar tudo sobre a entidade pais, tanto back end como front end.

É isto ?

[wmartins]

@guilhermecostalopes, o backend não é necessário, pois o teu problema aparentemente está no frontend.

[guilhermecostalopes]

@wmartins , segue o endereço

https://github.com/guilhermecostalopes/desif

Ve se adianta.

[wmartins]

@guilhermecostalopes não consegui reproduzir. Quando eu rodo o teu código (usando npm start) eu tenho o seguinte erro:

ERROR in src/app/modelo/usuario/usuarioEmpresa.model.ts(2,25): error TS2307: Cannot find module '../desif/empresa.model'.
src/app/modelo/usuario/usuarioEntidade.model.ts(2,26): error TS2307: Cannot find module '../desif/entidade.model'.

Pra podermos te ajudar, o ideal é que, ao rodar npm start, eu consiga rodar a aplicação e ver o mesmo problema que tu tá vendo.

Por exemplo, temos que conseguir acessar a rota que faz a chamada utilizando o pais.service.ts. Se tu quiser, tu pode criar uma rota /teste para isso. O importante é que tu consiga, nesse código que tu colocou no GitHub, demonstrar o problema acontecendo.

[guilhermecostalopes]

OK.

Vou fazer isto e atualizo o código

[guilhermecostalopes]

Não atualizei nada.
Estes modelos já encontram em https://github.com/guilhermecostalopes/desif/tree/master/src/app/modelo/usuario

[guilhermecostalopes]

Alguma novidade @wmartins ?

[wmartins]

@guilhermecostalopes, eu (e acho que outras pessoas também) não consigo rodar o teu código para poder te ajudar.

Seguem os passos que fiz:

$ git clone https://github.com/guilhermecostalopes/desif

$ cd dseif
$ npm install

$ npm start

(Resultado)

> [email protected] start /Users/whmartins/workspace/desif
> ng serve

** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
Date: 2018-07-12T17:11:29.240Z
Hash: ba230cd7fc5028d04702
Time: 8911ms
chunk {inline} inline.bundle.js (inline) 5.79 kB [entry] [rendered]
chunk {main} main.bundle.js (main) 2.93 kB [initial] [rendered]
chunk {polyfills} polyfills.bundle.js (polyfills) 636 bytes [initial] [rendered]
chunk {styles} styles.bundle.js (styles) 33.8 kB [initial] [rendered]
chunk {vendor} vendor.bundle.js (vendor) 853 kB [initial] [rendered]

ERROR in src/app/modelo/usuario/usuarioEmpresa.model.ts(2,25): error TS2307: Cannot find module '../desif/empresa.model'.
src/app/modelo/usuario/usuarioEntidade.model.ts(2,26): error TS2307: Cannot find module '../desif/entidade.model'.


webpack: Failed to compile.

Para qualquer um poder te ajudar, são necessárias as seguintes condições:

1. Ser possível rodar a tua aplicação, preferencialmente somente com npm start
2. Acessar alguma rota da tua aplicação (pode ser no /), ser capaz de ver o mesmo erro que tu tá tendo

Opcionalmente:

1. Mockar o backend que tu está consultando

[guilhermecostalopes]

Entendi e obriga @wmartins .
Mas aqui não dá este erro ao dar este comando, mesmo criando um projeto novo, por isto falei.

Mas se puder antes de fazer o npminstall,

Entra no arquivo:

1. desif/src/app/modelo/usuario/usuarioEmpresa.model.ts, e tira as linhas:
   import { Empresa } from "../desif/empresa.model";
   empresa: Empresa;

2. desif/src/app/modelo/usuario/usuarioEntidade.model.ts
   import { Entidade } from "../desif/entidade.model";
   entidade: Entidade;

Não estou com meu PC agora, mas estas linhas não tem problemas retirar ou comentar.

[wmartins]

@guilhermecostalopes, eu fiz essas alterações e a aplicação roda. Entretanto, não está sendo feita nenhuma chamada. Está sendo exibida a mesma página de quando é iniciado um projeto novo com Angular (usando ng init).

Novamente, para podermos te ajudar, é necessário que tu monte um passo a passo do que ser feito para ver o mesmo erro que o teu (afinal, somente assim podemos debugar e, eventualmente, resolver).

Um exemplo de passo a passo:

1. Clonar o projeto
2. npm install
3. Abrir a aplicação
4. Abrir o DevTools
5. Entrar na rota /alguma-rota-para-testar
6. Verificar que a chamada para /endereco-do-servico não está enviando o header XYZ
   6.1) O valor que deveria ser enviado deveria ser 'ABC'

Tu e somente tu tem o contexto desse código, como ele funciona, quais as coisas esperadas e etc., portanto, para alguém que não tem esse contexto, a pessoa não vai entender e não vai conseguir te ajudar.

Eu mexi no teu código um pouco para tentar reproduzir, porém, eu não tive sucesso, justamente pois eu não tenho esse contexto. Não sei qual tela deve chamar qual serviço, quais os parâmetros e etc. Eu realmente quero te ajudar, mas sem essas coisas, acho que não conseguimos avançar.

Recomendo que tu ajeite o teu código para tornar esse debugging possível. E, depois disso feito, recomendo que tu mesmo faça o processo (fazendo o git clone e etc talvez em outra máquina, outra pasta, etc) para ver se é possível reproduzir.

---

Adicionalmente, eu respondo bastante questões no StackOverflow e eles têm um guia de como fazer boas perguntas e também de como criar uma versão reproduzível de algum exemplo. Talvez ajude:

• https://stackoverflow.com/help/how-to-ask
• https://stackoverflow.com/help/mcve

[guilhermecostalopes]

Está certo @wmartins .
Agora que vi que não fiz nenhum mapeamento.
Vou ajustar e atualizar o git.