Angular proxy config not having any effect

Question

I have a REST API backend running at http://localhost:8000/api, my Angular 13 app runs at http://localhost:4200. Naturally, I receive a CORS error when trying to query any endpoint of that backend.

So I tried to set up the Angular proxy. I added the file src/proxy.conf.json with the following content:

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

After that, I added the following to angular.json:

"serve": {
      "builder": "@angular-devkit/build-angular:dev-server",
      "options": {
        "proxyConfig": "./src/proxy.conf.json"
      },
      "configurations": {
        "production": {
          "browserTarget": "photon:build:production"
        },
        "development": {
          "browserTarget": "photon:build:development"
        }
      },
      "defaultConfiguration": "development"
    },

(I also added the proxyConfig node under "development" configuration, but no change.)

Now, when I run npm start, which triggers ng serve, I do not see that the proxy is set up at all in the console output - and the API request still receives a CORS error. I believe there should be some console output that shows that the proxy was set up, like so:

Proxy created: /api -> http://localhost:8080 (I saw this here.)

I have no idea why this is not working, this should be simple.

Edit: Here is the request function itself.

      get(url: string) {
        return fetch(this.apiUrl + url, {
          method: 'GET',
          headers: {
            'Content-Type': 'application/json'
          }
        })
          .then(response => {
             console.log(response);
             return response.json();
          });
      }

The URL that this function receives is correct, I can see that in the debugger.

Ahoufe

What URL is your app hitting e.g. this.httpClient.get(url)? – Anyaanyah

I am using fetch(). The endpoint is http://localhost:8000/api/stoerungen. – Ahoufe

Well, I can call the API using a browser under the same link. What makes you think I would not need a proxy? It's a different origin - or else why would I receive the CORS error? – Ahoufe

Answer 1

Try the proxy config url without the leading dot "proxyConfig": "src/proxy.conf.json"

• https://angular.io/guide/build#proxying-to-a-backend-server

If you're using Node express you can add the cors middleware if hitting the server directly

Only calls made to the dev server will be proxied. If you're calling localhost:8000/api directly it won't work

You call localhost:4200/api, the Angular dev server receives the request, and proxies it to localhost:8000/api

Anyaanyah

The config is found, because it I give a wrong path, I get the error that the proxy config could not be found. So it's not that. The backend is made with Django. – Ahoufe

You are correct. I changed the URL that is called to the port 4200, which is the Angular application's port, and the request gets proxied to 8000. I think I am misunderstanding something completely about how the proxy works, but at least I can use the API now. Thanks! – Ahoufe

It's common to use the environments.ts files to set the base url of the server. For a mock environment set the URL to / so all calls go to the dev server – Anyaanyah

For anyone wondering why it is still not working after setting it up correctly, it seems that you will have this issue if your angular is running on https, but backend on http.If you change your backend to run on https or front to http, and set "secure" flag appropriately, it will start working as expected – Abduct

@Anyaanyah Only calls made to the dev server will be proxied. If you're calling localhost:8000/api directly it won't work. You call localhost:4200/api, the Angular dev server receives the request, and proxies it to localhost:8000/api Awesome! This really helped me! – Bricker

Answer 2

in one must include the proxy config under the key serve/configuration this will fix your issue.

"serve": {

  "builder": "@angular-devkit/build-angular:dev-server",

  "configurations": {

    "production": {

      "buildTarget": "client:build:production",

      "proxyConfig": "proxy.conf.json"

    },

    "development": {

      "buildTarget": "client:build:development",

      "proxyConfig": "proxy.conf.json"

    }

  },

  "defaultConfiguration": "development"

},

Welker

Gave you an upvote for the configuration of proxyConfig directly under development, that works for me too, whoo! I did also notice that you added it in your production configuration too, that's not how this proxy is to be used. But still, thanks! – Teddytedeschi

that's exactly as its supposed to be used. otherwise one will continue to have CORS errors in production. the only caveat to that is if one is doing SSR. I do this for a living daily. But I am grateful for the upvote. – Welker

Answer 3

i dont know but some case it just work with port 4200 of angular app, not specified p

Jory