Proxy setup in angular cli

Question

I have proxy.conf.json

{
"/api/*": {
    "target": "https://api.dev.xyz.com",
    "secure": false,
    "changeOrigin": true,
    "pathRewrite": { "^/api": "" },
    "logLevel": "debug"
  }
}

and I have ng serve --proxy-config proxy.conf.json in package.json file. When I run my project with npm start it showing error

ng serve --proxy-config proxy.conf.json
Browserslist: caniuse-lite is outdated. Please run next command `npm update`
10% building 3/3 modules 0 active[HPM] Proxy created: /api  ->  https://api.dev.xyz.com
[HPM] Proxy rewrite rule created: "^/api" ~> ""
[HPM] Subscribed to http-proxy events:  [ 'error', 'close' ]

I have checked multiple stack-overflow answers reference link, but still I have been stuck here from long time.

Where do you see an error? Except for the caniuse-lite package, there is no error. It's telling you that the rewrite rule has been applied (meaning when you make an http request like http.get<any>('/api/something') it will replace /api/something with https://api.dev.xyz.com/something. — Askirkela
– Askirkela, Commented Nov 14, 2019 at 8:13
I have API call like https://api.dev.xyz.com/api/login when I try to hit still it is showing blocked by cors error in the browser console. — change need
– change need, Commented Nov 14, 2019 at 8:26
How do you create the request? Is it this.http.get('https://api.dev.xyz.com/api/login') or this.http.get('/api/login') (or even this.http.get('/api/api/login'), given the path rewrite in your proxy file)? — Askirkela
– Askirkela, Commented Nov 14, 2019 at 8:42
I'm creating request as this.http.get('https://api.dev.xyz.com/api/login') — change need
– change need, Commented Nov 14, 2019 at 8:47

Askirkela · Accepted Answer · 2019-11-14 09:09:17Z

0

Ok. After asking for more information (see the comments on the question), here's an answer:

What the proxy file is doing is creating a rewrite rule. That means whereever you create a request to /api/something/, it will be rewrote as https://api.dev.xyz.com/something and be somewhat considered as coming from the full url (hence no CORS errors).

Try requesting with this.http.get('/api/something') and you'll see in the console a message telling you that the request got rewritten.

answered Nov 14, 2019 at 9:09

Askirkela

1,21911 silver badges20 bronze badges

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

3 Comments

change need Over a year ago

If I change request url from https://api.dev.xyz.com/something to /api/something. it is hitting localhost:4200/api/something instead of https://api.dev.xyz.com/api/something

change need Over a year ago

even in the angular cli it showing Rewriting path from "/api/students?page=1&page_size=20&paginate=true" to "/students?page=1&page_size=20&paginate=true".

change need Over a year ago

and GET /api/students?page=1&page_size=20&paginate=true ~> https://api.dev.xyz.com

Collectives™ on Stack Overflow

Proxy setup in angular cli

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related