Angular is not using the api server

Question

I just started with a Angular 4 & Spring Boot web application. I'm trying to call a REST path:

ngOnInit(): void {
  // Make the HTTP request:
  this.http.get('/greeting').subscribe(data => {
    // Read the result field from the JSON response.
    this.results = data['results'];
  });
}

But the resulting URL is GET http://localhost:4200/greeting 404 (Not Found). I've researched this topic and a lot of advice was to add a proxy file for NPM so it changes the routes.

"start": "ng serve --proxy-config proxy.conf.json",

And the proxy.conf.json file:

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

When I run npm run start I get the following message:

[email protected] start
C:\Users\alucardu\Documents\projects\movieseat\frontend\src\main\frontend> ng serve --proxy-config proxy.conf.json

Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **

So the proxy file is loaded but it has no effect. Am I using outdated information or just doing something wrong?

I don't know what you're exactly doing here, but can't you just give the get call a full URL ? — user4676340
– user4676340, Commented Sep 12, 2017 at 7:53
@marouane kadiri You are wrong. If you want to call local api your server probably runs on another port so you need proxy. It will also let you avoid problems with same-origin-policy that you would have using full URL — Arkej
– Arkej, Commented Sep 12, 2017 at 8:04
@Arkej as stated in the question. The resulting url is http://localhost:4200/greeting so it's doing the request from the NPM server. — Peter Boomsma
– Peter Boomsma, Commented Sep 12, 2017 at 8:10

Peter Boomsma · Accepted Answer · 2017-09-12 11:24:58Z

1

I just stumbled on this answer > Redirect Angular2 http requests through proxy. And adding this line:

"pathRewrite": {"^/api" : ""}

To the proxy.conf.json file fixed my problem.

{
    "/": {
        "target": "http://localhost:8090",
        "secure": false,
        "pathRewrite": {"^/api" : ""}
    }
}

I can now call a function like so:

getGreeting() {
  this.http.get('/greeting').subscribe(data => {
    // Read the result field from the JSON response.
    this.results = data['results'];
  });
}

And it calls the http://localhost:4200/greeting with success and it returns the correct headers. It also seems to "fix" the CORS problem. I don't need to specify any CORS code in my spring-boot backend.

edited Sep 12, 2017 at 11:24

answered Sep 12, 2017 at 11:19

Peter Boomsma

9,87927 gold badges116 silver badges219 bronze badges

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

Comments

mxr7350 · Accepted Answer · 2017-09-12 08:22:14Z

0

You are calling wrong path in your init

Should be like this

ngOnInit(): void {
  // Make the HTTP request:
  this.http.get('./api/greeting').subscribe(data => {
    // Read the result field from the JSON response.
    this.results = data['results'];
  });
}

And add * in your proxy.config

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

edited Sep 12, 2017 at 8:22

answered Sep 12, 2017 at 7:59

mxr7350

1,4543 gold badges23 silver badges31 bronze badges

5 Comments

mxr7350 Over a year ago

@PeterBoomsma did you just try that path in your browser? it won't work like that. Did you try it in your project? I have exact setup in my project and it works without any issue

Peter Boomsma Over a year ago

I checked around some more and found this link stackoverflow.com/questions/41488769/…. Adding "pathRewrite": {"^/api" : ""} to the proxy conf file worked. And I don't need to add /api to the get url.

mxr7350 Over a year ago

@PeterBoomsma glad that you sorted it. Although I don't think pathRewrite is problem solver. I think it is solved because you changed "/api/*" to /

Peter Boomsma Over a year ago

It didn't really mather what I renamed that path to. /api / api/*.

mxr7350 Over a year ago

I meant if you removed api completely

Emre Öztürk · Accepted Answer · 2017-09-12 08:02:03Z

-1

I suggest your Spring Boot Application is running on Port 8080. Just write the total URL into the GET-Request:

this.http.get('http://localhost:8080/greeting').subscribe(data => {

If you want change the host for production and test environment, then exclude the host as a constant in the existing environment file and import it. Then you could do this:

this.http.get( PROD + '/greeting').subscribe

answered Sep 12, 2017 at 8:02

Emre Öztürk

2,8804 gold badges19 silver badges19 bronze badges

Collectives™ on Stack Overflow

Angular is not using the api server

3 Answers 3

Comments

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related