proxy.conf.js not working in ASP.NET Core app with Angular

Question

I am trying to setup an ASP.NET Core app with Angular frontend by following this tutorial. I was already able to successfully create the projects and I am also able to run and debug them flawlessly. The problem is that for some reason I cannot get proxying the backend calls to the ASP.NET Core backend to work. When I try to call an action inside a controller from the angular app, I get a 404 error.

Here is my proxy.conf.js file:

const PROXY_CONFIG = [
  {
    context: [
      "/api/*",
    ],
    target: "https://localhost:7139",
    secure: false
  }
]

module.exports = PROXY_CONFIG;

This is my TestController which I created for testing purposes:

[Authorize]
[ApiController]
[Route("api/[controller]")]
public class TestController : ControllerBase
{
    private readonly ILogger<TestController> _logger;

    public TestController(ILogger<TestController> logger)
    {
        _logger = logger;
    }

    [HttpGet("{id}")]
    public string Get(int id)
    {
        return "Test response";
    }
}

Here is how I am trying to call it from within the Angular app:

this.http.get<string>(`api/test/1`).subscribe((value) => {
  alert(value);
},
(error) => {
  alert(`Error: ${error.error}`);
});

This is how the proxy.conf.js is added in the serve section of my angular.json:

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

I already checked the port and in the proxy.conf.json and it does indeed match the port specified in the applicationUrl entry of the launchSettings.json file in the ASP.NET Core project. Here is the content of the launchSettings.json file:

{
  "$schema": "https://json.schemastore.org/launchsettings.json",
  "iisSettings": {
    "windowsAuthentication": true,
    "anonymousAuthentication": false,
    "iisExpress": {
      "applicationUrl": "http://localhost:30959",
      "sslPort": 44345
    }
  },
  "profiles": {
    "WebApplication1": {
      "commandName": "Project",
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      },
      "applicationUrl": "https://localhost:7139;http://localhost:5139",
      "dotnetRunMessages": true
    },
    "IIS Express": {
      "commandName": "IISExpress",
      "launchBrowser": true,
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      }
    }
  }
}

What could be the reason why this is still not working? Could it be related to the fact that I am trying to get this to work with Windows Authentication, or what am I doing wrong here?

Answer 1

I ran into the same problem. After an hour I remembered that Angular uses ** as a catch all and not *.

const PROXY_CONFIG = [
  {
    context: [
      "/api/**",
    ],
    target: "https://localhost:7139",
    secure: false
  }
]

module.exports = PROXY_CONFIG;

I think that you can use a single * if the proxy.conf.js file is formatted the same as a json file. Like so:

{
  "/api/*": {
    "target": "https://localhost:7139",
    "secure": false
  }
}

Answer 2

Try adding your [Controller][Action] explicitly into proxy.config.js

Like this:

const PROXY_CONFIG = [
{
   context: [
   "/api/Test/Get", 
  ],
  target: "https://localhost:7139",
  secure: false
 }
 ]

 module.exports = PROXY_CONFIG;

Answer 3

I had the same problem using VS Code on Ubuntu. All I needed to do was update my PROXY_CONFIG's context entry to ["/api/**"] then I could change all my controllers to route with the /api/ prefix.

The reason for the proxy is that your dotnet application runs on one port while your angular app on another. When you press F5 VS Code will start both apps, and load the UI through the angular port.

If you look at the fetch-data-component from the default project you'll see it injects a BASE_URL. This base url uses the port the angular app listens on. It is suggested to use this BASE_URL in your service and allow the proxy to do its job.

So for example a request such [angular app]+/api/customers needs to be resolved to the dotnet app, this is the purpose of proxy.conf.js.

To differentiate between an agular route and a dotnet api route the context value in PROXY_CONFIG is used to trigger the redirect to the dotnet app. This is where /api/** comes in as angular uses the **-wildcard to catch all incoming urls starting with the api-prefix, then redirects them to whatever the target value is.

Answer 4

I had the same problem (ASP.NET Core 6 / Angular), I fixed it simply using "/api/".

const PROXY_CONFIG = [
  {
    context: [
      "/api/" // <---
    ],
    target: target,
    secure: false
  }
]

Don't forget to change your Controller's routes accordingly.

Answer 5

in my case, I had to restart dotnet watch run to restart the proxy