Wrong communication with Frontend and backend (Java - Angular)

Question

I try communicate my Angular Frontend with my Java/Spring Boot Backend. But the terminal show me this error:

[HPM] Error occurred while trying to proxy request /api/dados from localhost:4500 to http:/localhost:8080 (ECONNREFUSED) (https://nodejs.org/api/errors.html#errors_common_system_errors)

Here is my exemple.service.ts (Angular) code. Here I request the data:

import {Injectable} from "@angular/core";
import {Http, Response} from "@angular/http";
import 'rxjs/Rx';

@Injectable()
export class ExService{
  constructor(private http: Http){

  }

  getName(){
    return this.http.get("/api/dados").map(
      (response: Response) =>{
        return response.json();
      }
    );
  }
}

And here is my exemple.java (Java code). It is responsible to send data:

package com.lucas.bef.Envia;

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
@RequestMapping("/api/dados")
public class Dados {
    String teste;

    public Dados(){
        this.teste = "LUCAS";
    }

    public void setNome(String nome){
        this.teste = nome;
    }

    @GetMapping( value = {"","/"})
    public String getNome(){
        return teste;
    }
}

If I start the Spring Application... The terminal show me one message Tomcat start in 8080 port.

I create a configuration proxy file (proxy-conf.json) like this:

{
  "/api":{
    "target": "http:/localhost:8080",
    "secure": false
  }
}

Please someone help me. I need do this. Is very Important. Thanks!

Please edit your question to tell us more about how your servers are set up on localhost. According to your error message the proxy server on port 4500 is not relaying your operation to the server on 8080. — O. Jones
– O. Jones, Commented Sep 11, 2017 at 16:55
@O.Jones If I execute npm start the Angular.cli run in localhost 4500. Or by default 4200. But. The Spring Boot program (my backend) Run the Tomcat Apache in 8080 port. — Luke Alves
– Luke Alves, Commented Sep 11, 2017 at 17:39

Kshitij Mandloi · Accepted Answer · 2017-09-12 06:39:00Z

1

The problem seems to be with you running both applications(front-end and back-end) on different ports. Such a request is called a CORS. You can enable cors in Spring-Boot App like this. Or for temporary testing please download this chrome plugin

answered Sep 12, 2017 at 6:39

Kshitij Mandloi

1265 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

RazvanParautiu · Accepted Answer · 2017-09-14 18:11:33Z

First of all you have been set "target": "http:/localhost:8080",wrong! It is http://localhost:8080

Also please try to rewrite the request from service like this

 getName(){
    return this.http.get("http://localhost:8080/api/dados").map(
      (response: Response) =>{
        return response.json();
      }
    );
  }

to check if it is working! You must to subscribe the Observable response from service method

Also you must allow your spring server to communicate with angular application . To do that you must configure your CORS from the back-end

import java.io.IOException;
import javax.servlet.FilterChain;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.springframework.web.filter.GenericFilterBean;


public class CORSFilter extends GenericFilterBean {

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

    if (((HttpServletRequest) req).getMethod().equals("OPTIONS")) {

      HttpServletResponse response = (HttpServletResponse) res;
      response.setHeader("Access-Control-Allow-Origin", "http://localhost:4500");
      response.setHeader("Access-Control-Allow-Credentials", "true");
      response.setHeader("Access-Control-Allow-Methods", "GET,HEAD,OPTIONS,POST,PUT,DELETE");
      response.setHeader("Access-Control-Allow-Headers", "Access-Control-Allow-Headers, Origin,Accept, "
            + "X-Requested-With, Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers");

    } else {

      chain.doFilter(req, res);

    }
  }
}

Collectives™ on Stack Overflow

Wrong communication with Frontend and backend (Java - Angular)

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related