3

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.

mneumann
  • 713
  • 2
  • 9
  • 42

1 Answers1

8

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

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

Drenai
  • 11,315
  • 9
  • 48
  • 82
  • 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. – mneumann Mar 15 '22 at 07:32
  • 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! – mneumann Mar 15 '22 at 21:28
  • 1
    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 – Drenai Mar 15 '22 at 21:30
  • 1
    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 – donatasj87 Jul 18 '22 at 15:32
  • 7
    @Drenai `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! – marvedly Aug 17 '22 at 08:38