4

Primeiro vou dizer o que acontece!

Eu desenvolvi um simples projeto Spring Boot para mostrar em tela uma GRID tendo como Frond-End o Angular, a requisição da API java é a porta 8080 e do Angular é porta 4200, como cada um faz requisições diferente eu resolvi usar o CORS, mas não tive resultado positivos e deu essa mensagem de erro;

Failed to load resource: the server responded with a status of 401 ()
localhost/:1 Failed to load http://localhost:8080/lancamentos?resumo: Response to preflight request doesn't pass access control check: The 'Access-Control-Allow-Origin' header has a value 'http://localhost:8000' that is not equal to the supplied origin. Origin 'http://localhost:4200' is therefore not allowed access.
core.js:1350 ERROR Error: Uncaught (in promise): Response with status: 0  for URL: null
    at resolvePromise (zone.js:824)
    at resolvePromise (zone.js:795)
    at eval (zone.js:873)
    at ZoneDelegate.invokeTask (zone.js:425)
    at Object.onInvokeTask (core.js:4621)
    at ZoneDelegate.invokeTask (zone.js:424)
    at Zone.runTask (zone.js:192)
    at drainMicroTaskQueue (zone.js:602)
    at ZoneTask.invokeTask [as invoke] (zone.js:503)
    at invokeTask (zone.js:1540)

Então recapitulando!

Meu sistema está fazendo uma requisição na porta 8000 a parti do localhost 4200 do Frond-End. Quando uma requisição é feito por um protocolo um dominio em portas diferentes da origem, que é o meu caso, a aplicação Angular está na porta 4200 a API Java está na porta 8080 nesse caso por segurança os navegadores restringem o acesso, não permite que a requisição seja feita, o próprio navegador já tem essa camada de segurança que restringem o acesso.

mas existe um mecanismo conhecido como CORS que permite que os sevidores configure o controle de acesso cross domain, ou seja, com o protocolo, com dominio ou portas diferentes da origem, o back-end que estou usando já tem a implementação de cross domain.

Para dá permissão ao meu projeto que está empacotado, eu executei esse comando:

java -jar algamoney-api-1.0.0-SNAPSHOT.jar  --
 spring.datasource.username=root 
--spring.datasource.password=1234 
 algamoney.origin-permitida=http://localhost:4200

Porém não funcionou. Ele me negou a permissão como podem ver.

Então fiz outra tentativa, observem minhas configurações do meu CORS no meu projeto Spring Boot:

package com.example.algamoney.api.config.property;

import org.springframework.boot.context.properties.ConfigurationProperties;

@ConfigurationProperties("algamoney")
public class AlgamoneyApiProperty {

    private String originPermitida = "http://localhost:8000";

    private final Seguranca seguranca = new Seguranca();

    public Seguranca getSeguranca() {
        return seguranca;
    }

    public String getOriginPermitida() {
        return originPermitida;
    }

    public void setOriginPermitida(String originPermitida) {
        this.originPermitida = originPermitida;
    }

    public static class Seguranca {

        private boolean enableHttps;

        public boolean isEnableHttps() {
            return enableHttps;
        }

        public void setEnableHttps(boolean enableHttps) {
            this.enableHttps = enableHttps;
        }

    }

}

E estancio para essa outra classe java que faz tudo:

@Component
@Order(Ordered.HIGHEST_PRECEDENCE)
public class CorsFilter implements Filter {

    @Autowired
    private AlgamoneyApiProperty algamoneyApiProperty;

    @Override
    public void doFilter(ServletRequest req, ServletResponse resp, FilterChain chain)
            throws IOException, ServletException {

        HttpServletRequest request = (HttpServletRequest) req;
        HttpServletResponse response = (HttpServletResponse) resp;

        response.setHeader("Access-Control-Allow-Origin", algamoneyApiProperty.getOriginPermitida());
        response.setHeader("Access-Control-Allow-Credentials", "true");

        if ("OPTIONS".equals(request.getMethod()) && algamoneyApiProperty.getOriginPermitida().equals(request.getHeader("Origin"))) {
            response.setHeader("Access-Control-Allow-Methods", "POST, GET, DELETE, PUT, OPTIONS");
            response.setHeader("Access-Control-Allow-Headers", "Authorization, Content-Type, Accept");
            response.setHeader("Access-Control-Max-Age", "3600");

            response.setStatus(HttpServletResponse.SC_OK);
        } else {
            chain.doFilter(req, resp);
        }

    }

    @Override
    public void destroy() {
    }

    @Override
    public void init(FilterConfig arg0) throws ServletException {
    }

}

Você pode ter percebido que a classe AlgamoneyApiProperty está com a porta 8000 e meu Frond-End Angular está configurando para a porta 8080, foi por isso que executei comando solicitando permissão através do MSDOS, então para não mais depender de solicitações do MSDOS resolvi mudar a porta da requisição da minha API java para 8080 e no meu Frond-End para 8080.

Só recapitulando, a minha API vai ser executada no localhost 8080 executando na requisição 8080 e meu Frond-End Angular vai ser executada no localhost 4200 solicitando da API java a requisição 8080 como podem ver abaixo

API Java

Classe AlgamoneyApiProperty

private String originPermitida = "http://localhost:8080";

Frond-End Angular

import { Http, Headers } from '@angular/http';
import { Injectable } from '@angular/core';

import 'rxjs/add/operator/toPromise';

@Injectable()
export class LancamentoService {

  lancamentosUrl = 'http://localhost:8080/lancamentos';

  constructor(private http: Http) { }

  pesquisar(): Promise<any> {
    const headers = new Headers();
    headers.append('Authorization', 'Basic YWRtaW5AYWxnYW1vbmV5LmNvbTphZG1pbg==');

    return this.http.get(`${this.lancamentosUrl}?resumo`, { headers })
      .toPromise()
      .then(response => response.json().content)
  }

}

O resultado foi o mesmo, e gerou o mesmo erro como foi comentado no inicio dessa postagem.

A minha próxima tentativa foi tentar com outras portas, eu tentei com 9000, 7654 e com 8000.

Alguém pode afirma que talvez a porta 8080 pode estar com problema! Então eu configurei meu CORS na minha API Java para aceitar qualquer origem, como pode ver abaixo;

@Component
@Order(Ordered.HIGHEST_PRECEDENCE)
public class CorsFilter implements Filter {

//  @Autowired
//  private AlgamoneyApiProperty algamoneyApiProperty;

    @Override
    public void doFilter(ServletRequest req, ServletResponse resp, FilterChain chain)
            throws IOException, ServletException {

        HttpServletRequest request = (HttpServletRequest) req;
        HttpServletResponse response = (HttpServletResponse) resp;

        response.setHeader("Access-Control-Allow-Origin", request.getHeader("Origin"));

        response.setHeader("Access-Control-Allow-Credentials", "true");

        response.setHeader("Access-Control-Allow-Origin", request.getHeader("Origin"));


        if ("OPTIONS".equals(request.getMethod())) {
        response.setHeader("Access-Control-Allow-Methods", "POST, GET, DELETE, PUT, OPTIONS");
            response.setHeader("Access-Control-Allow-Headers", "Authorization, Content-Type, Accept");
            response.setHeader("Access-Control-Max-Age", "3600");
            response.setStatus(HttpServletResponse.SC_OK);
        } else {
            chain.doFilter(req, resp);
        }

    }

    @Override
    public void destroy() {
    }

    @Override
    public void init(FilterConfig arg0) throws ServletException {
    }

}

E simplesmente pegou!

inserir a descrição da imagem aqui

Então o problema não é na porta, o problema pode ser nas configuração do CORS.

Alguém pode perguntar! Por que você não fica usando a API para aceitar qualquer origem?

Eu não quero fazer isso porque posso baixar o nível de segurança.

Preciso muito saber onde está o erro das configuração do meu CORS para aceitar uma origem especifica.

0

3 Respostas 3

2

Conforme te respondi em sua outra pergunta, API na porta 8000 e Angular na porta 4200, como resolver?, para desenvolvimento o ideal é você configurar um Proxy no server do @angular/cli.

Conforme deixei o link do meu post onde explico o que é CORS e como configurar o Proxy, https://medium.com/@gigioSouza/resolvendo-o-problema-do-cors-com-angular-2-e-o-angular-cli-7f7cb7aab3c2, você tem de configura-lo conforme a necessidade do seu projeto.

Se você remover a configuração de CORS e usar a configuração de Proxy que esta no post do link, você ja vai conseguir seguir com o desenvolvimento.

O ideal é você preparar seu CORS para o ambiente de produção. Como fazer isso? R: Google, pesquisa, teste... afinal só você conhece as necessidades do seu projeto.


Conforme passou seu repo para eu dar uma olhada: https://github.com/wladyband/erro1/tree/master/wladimi-ui

Logo de cara verifiquei que seu arquivo de configuração se chama proxy.config.js e no seu package.json seu script de start é: ng serve --proxy-config proxy.conf.js.

Troque seu script de start para ng serve --proxy-config proxy.config.js

E você deve parar de fazer requisições para http://localhost:8080, para acessar este serviço por exemplo http://localhost:8080/lancamentos faça a requisição para este endpoint /api/lancamentos.

Agora vamos la, pelo que vi você esta usando Angular 5, então troque o velho HttpModule pelo novo HttpClientModule.

Crie um interceptor para completar a url da requisição colocando a url base da requisição, que em dev é /api. Assim quando você for para produção e não use proxy, você só precisa alterar a url base dentro desse interceptor para e pronto, todos seus endpoints estão apontando para produção.

Ai é só configurar a url base conforme o perfil do build. Explorando os arquivos environment.

Documentação do HttpClient https://angular.io/guide/http

8
  • obrigado pela sua tentativa de me ajudar, mas sua resposta não ajuda muito, porque da mesma forma que a API Java funciona em ambiente de desenvolvimento é para funcionar também em ambiente de produção sem haver gambiarras, ou seja, sua abordagem ela é funcional, porém não é uma boa prática de programação. Solicito que não fique ofendido com que falei, se por acaso conhecer alguém dos seus contatos que possa ver minha postagem e possa me ajuda, eu sei bastante grato.
    – user10264
    Commented 14/12/2017 às 12:06
  • 2
    Cara, usar proxy não é uma gambiarra. É um recurso utilizado para desenvolvimento e também utilizado para produção. Se você quer uma ajudar melhor comece por escrever melhor sua pergunta e ser mais objetivo.
    – Giovane
    Commented 14/12/2017 às 12:08
  • Me desculpe mas minha pergunta está bem elaborada, se você tem dúvidas ficaria mais elegante de fazer perguntas sobre o que você não entendeu da minha postagem, eu não sei se de fato abordagem de proxy pode ser feita em ambiente de produção.
    – user10264
    Commented 14/12/2017 às 12:17
  • Se pode ser feita eu convido você a prova em um modelo qualquer encontrado no github, novamente não foi minha intenção ser deselegante com você, mas dos projetos que encontrei usando CORS a maioria não usa boas práticas de desenvolvimento e por isso que fiz essa postagem. E dos projeto que encontrei no GitHub não encontrei nenhuma abordagem semelhante a que você fez para ser aplicada em ambiente de produção. Foi por isso que passei tanta segurança em dizer quem não é uma boa prática.
    – user10264
    Commented 14/12/2017 às 12:18
  • 3
    Se a arquitetura de sua aplicação é feita usando containers docker, a comunicação entre esses containers é feita via proxy. Se você tem uma arquitetura de micro-serviços escalavel onde você não tem noção de quantos serviços estão de pé para te atender ou qual endereço deles, você bate no loadbalancers que além de gerenciar as requisições para os serviços de forma inteligente, ele atua como um proxy.
    – Giovane
    Commented 14/12/2017 às 12:27
0

Eu conseguir resolver meu problema com a solução abaixo, porém também dá certo com a solução do @Giovane e tanto que preferi validar a resposta do @Giovane porque é valida.

Uma primeira coisa seria o comando. A propriedade "algamoney.origin-permitida" precisa ser passada com "--" ou com "-D". Assim:

--algamoney.origin-permitida=ORIGEM

... ou

-Dalgamoney.origin-permitida=ORIGEM

Na API, somente a porta 8080 sempre para não ter problemas de configuração ou alguma confusão relacionada. E na parte Angular sempre é bom revisar o código para ter certeza que tudo está usando a porta 8080.

Depois que fiz isso funcionou perfeitamente meu projeto.

-2

Olá, estou com o mesmo problema que você. Além disso tudo, só consegui chegar no resultado, pois comentei os PreAutorize dos métodos, pois mesmo passando Basic, ele tava verificando o PreAutorize. Conseguiste resolver sem autoriza todos os domínios?

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