How to setup proxy for Angular apllication

Question

I am working on Angular app and the backend is Python which is running on port http://127.0.0.1.8000/.

When I try to make a post API call, I'm getting a Cors error. How can I set up a proxy in the Angular app?

I tried with the proxy setting in the Angular app using proxy.conf.json, but the API call is to localhost:4200 and I am getting a HTTP 404 error.

component.ts
aiServiceCall(userInput: string) {
    this.aiService
      .postReq(userInput)
      .subscribe((response) => {
        console.log('response', response);
      });
  }

service.ts

postReq(userInput: string): Observable<any> {
    return this.http.post(${environment.API_URL}/chat/, {
      params: {
        message: userInput
      }
    })
  }

proxyconfirg.json
{
    "/api/*": {
        "target": "http://127.0.0.1:8000/",
        "pathReWrite": {
            "^/api/": ""
        },
        "secure": false,
        "logLevel": "debug",
        "changeOrigin": true
    }
}

environment.ts
export const environment = {
  production: false,
  API_URL :'http://127.0.0.1:8000'
};

If that's a CORS error, you need to modify the backend to accept requests from desired origins — Harun Yilmaz
– Harun Yilmaz, Commented Sep 19, 2023 at 12:08
CORS is an issue with the backend. Have your backend accept requests that come from that url. You can also probably tell it to accept all headers for now — SomeStudent
– SomeStudent, Commented Sep 19, 2023 at 13:18
To make the angular proxy work, you cannot use absolute URL’s for your requests. — MikeOne
– MikeOne, Commented Sep 19, 2023 at 14:04

Midhun · Accepted Answer · 2023-09-20 05:10:53Z

0

Using Angular Proxy

https://javascript.plainenglish.io/all-you-need-to-know-about-angular-proxy-configuration-a1aeb2d8c86

these examples shows how to set up a angular proxy. Hope it helps :)

EDIT

in your case this proxy config is only valid when you do request in local environment , so in that instead of accessing the endpoint directly just access the relative endpoint with reWrite keyword (/api).

return this.http.post(/api/chat/, {
  params: {
    message: userInput
  }
})

this should work fine if you start server with proxy config as param

PS: also make sure proxyconfirg.json is not a typo.

edited Sep 20, 2023 at 5:10

answered Sep 19, 2023 at 12:15

Midhun

1241 silver badge10 bronze badges

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

5 Comments

sindush velagaleti Over a year ago

Not able to access the second link, and the Backend code is not running not on localhost: something. it is running on 127.0.0.8000. when i implement a proxy api call is like localhost:4200/something so it is showing 404 error

Midhun Over a year ago

that is fine , you just have to specify the url in you case like target: http://127.0.0.8000 and will works fine.. i use this to connect docker instances and can verify with your public ip too. make sure your proxy configuration is correct

Midhun Over a year ago

if its not working can you please specify the http call with code snippets

sindush velagaleti Over a year ago

component.ts aiServiceCall(userInput: string) { this.aiService .postReq(userInput) .subscribe((response) => { console.log('response', response); }); } ` service.ts postReq(userInput: string): Observable<any> { return this.http.post(${environment.API_URL}/chat/, { params: { message: userInput } }) }

Midhun Over a year ago

@sindushvelagaleti, first of all, i don't know its intentional or not you have typo in naming the proxyConfig and in your case pathReWrite(/api) should be added in the api endpoint.. PS: i will add a edit in my answer.

Collectives™ on Stack Overflow

How to setup proxy for Angular apllication

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related