Angular 6 call localhost API

Question

I am trying to call an API locally in my angular 6 app, the API URL is http://localhost/myapi I added a proxy config file that point to this URL but I got 404 error when I run my app.

My proxy.config.json file:

{
  "/api/*":{
    "target":"http://localhost/myapi",
    "secure": false,
    "logLevel": "debug"
  }
}

package.json file:

"serve-dev": "ng serve --source-map=false --proxy-config proxy.config.json",

http.service.ts file:

export class HttpService{
     static serverApiUrl : string  = "/api/"
}

auth.service.ts file :

 this.http.get(HttpService.serverApiUrl+"site/check-auth")
            .map(response => {
                if(response['auth'] == 1) {
          return true;
                } else {
          this.router.navigate(['/auth'])
                    return false;
                }
            });

In the console I got this:

http://localhost:4200/api/site/check-auth

any suggestions.

Are you doing ng serve or npm start?

Amit Chigadani
– Amit Chigadani

2018-09-26 07:40:51 +00:00
Commented Sep 26, 2018 at 7:40 — Amit Chigadani
– Amit Chigadani, Commented Sep 26, 2018 at 7:40
npm run serve-dev

Mhmd Backer Shehadi
– Mhmd Backer Shehadi

2018-09-26 07:44:48 +00:00
Commented Sep 26, 2018 at 7:44 — Mhmd Backer Shehadi
– Mhmd Backer Shehadi, Commented Sep 26, 2018 at 7:44
the app builds but the request return 404 error

Mhmd Backer Shehadi
– Mhmd Backer Shehadi

2018-09-26 07:45:56 +00:00
Commented Sep 26, 2018 at 7:45 — Mhmd Backer Shehadi
– Mhmd Backer Shehadi, Commented Sep 26, 2018 at 7:45
the real api url is localhost/myapi/site/check-auth

Mhmd Backer Shehadi
– Mhmd Backer Shehadi

2018-09-26 07:46:37 +00:00
Commented Sep 26, 2018 at 7:46 — Mhmd Backer Shehadi
– Mhmd Backer Shehadi, Commented Sep 26, 2018 at 7:46

Kirk Larkin · Accepted Answer · 2018-09-26 07:50:17Z

2

It looks like you need to rewrite the URL path, using something like this:

{
    "/api": {
        "target": "http://localhost",
        "secure": false,
        "logLevel": "debug",
        "pathRewrite": {
            "^/api": "/myapi"
        }
    }
}

I've removed /* from the prefix you had and added a pathRewrite section. I believe what you had before was attempting to proxy to localhost/myapi/api/site/check-auth (with that extra /api), which should be stripped with the pathRewrite section.

answered Sep 26, 2018 at 7:50

Kirk Larkin

94.4k17 gold badges235 silver badges214 bronze badges

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

Collectives™ on Stack Overflow

Angular 6 call localhost API

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related