Angular not running with proxy configuration

Question

I have dotnet (6) backend running on localhost:9090 and Angular frontend running at 4200.

I use graphql instead of Rest (just a detail, doesn't change much) and when I try to reach

http://localhost:9090/graphql

of course it says problem with CORS origin. I've been able to fix that adding CORS to my backend, but I would prefer not touch backend and instead make a proxy on Angular.

I'd like to tell my angular app when reaching http://localhost:9090/graphql I want the origins be http://localhost:9090 so that I would not have CORS problems (considering that will be same origin).

I created that proxy-backend.conf.json file:

{
  "*": {
    "target": "http://localhost:9090",
    "secure": false,
    "logLevel": "debug"
  },
  "/graphql": {
    "target": "http://localhost:9090",
    "secure": false,
    "logLevel": "debug"
  }
}

And added that script inside the package.json:

"start-test": "ng serve --proxy-config proxy-backend.conf.json --port 4200"

When i run npm run start-test, it actually execut the command but doesn't look like proxy is working. What make me think it's not working is for three reasons:

• Still having issues with CORS origin;
• I can't see any proxy debug at the start of the application; i remember in an old project, when starting i got in console something like 'proxy created etc etc', not getting it here;
• In the old project, I got in console the forward too, like when I called an api I could see on the console thislink redirected -> there, can't see it now.

Old project was running on Angular 8, this one with Angular 16, maybe I'm just doing something wrong, considering that difference between the two versions.

This is the error I'm getting in console:

Any idea?

Answer 1

What I was doing wrong was having a path inside the environment file. The proxy will work only if (in my case) the api call would be http://localhost:4200/graphql. So if that was the path, the proxy would work and would change the path in http://localhost:9090/graphql and would change the origin.

My mistake was making a direct call to http://localhost:9090/graphql , and in that way proxy would not work.

Answer 2

to manage CORS issues, you should try the changeOrigin attribute:

{
  "*": {
    "target": "http://localhost:9090",
    "secure": false,
    "changeOrigin": true,   //<- this one
    "logLevel": "debug"
  }
}