'Vite. http proxy error at /weatherforecast...' error when launching the Angular and ASP.NET Core app in Visual Studio

Question

I created an app from the 'Angular with ASP.NET Core' project template in Visual Studio 2022 17.8 and .NET 8. It launches the API app in Chrome and the Angular app in Edge. In Edge it doesn't show the weather temperature values. I see the error below in the console. The app used to work but then I tried to make Chrome the default browser for the Angular app and it never properly anymore. I made Edge the default browser for the Angular project. I also deleted and recreated the app several times and it never worked correctly anymore. Using Node 20 and Angular 17.

What could be the issue? I don't know much about Vite and how it relates to the reverse proxy in ASP.NET.

Error:

[vite] http proxy error at /weatherforecast: AggregateError at internalConnectMultiple (node:net:1114:18) at afterConnectMultiple (node: net: 1667:5)

Jungjungfrau

I had the same issue when using the Docker support option for this template - using the template without Docker support fixed this issue for me – Sounding

Answer 1

I was creating the app with the 'Configure for HTTPS' unchecked. I was seeing some SSL errors even though it's not supposed to be using https and ssl. When I created the app with it checked, it worked. I don't know why.

Jungjungfrau

lol this answer made me chuckle, typical MS for not thinking of these things LOL – Lazurite

Answer 2

[vite] http proxy error at /weatherforecast: AggregateError at internalConnectMultiple (node:net:1114:18) at afterConnectMultiple (node: net: 1667:5)

The reason is that the client loads faster than the server. Right click the server project, and execute debug from there, and see if you still get the error.

In Edge it doesn't show the weather temperature values.

It actually does show the values, however, the color of the font is silver, and is semi transparent. Click down, and drag your mouse over the weather table.

Hofer

Answer 3

Continuing off of what Rich76 said, the server needs to be started before starting the client. The default VisualStudio project does not do this for you. Heres a quick fix:

Right click on your server project, and "Set as Startup project". Now, when you click on the run button, the server starts first, then the client, and everything is wired properly.

Lazurite

Answer 4

Inside the Angular Code go to src there is a proxy.conf.js. Inside it, in context instead of

context: [ "/weatherforecast", ],

you have to write

context: [ "/WeatherForecast", ].

Louisiana

Windows is not case sensitive. – Jungjungfrau

Answer 5

Got similar error in React and giving a vite proxy made it work makes sure the https also is correct where needed. Adding here after finding solution as searching for serve error while API call landed here

vite.config.ts

server: {
    port: 5176,    
    proxy: {
      '/api': {
        target: 'http://localhost',
        changeOrigin: true,
        secure: false,
        ws: false
      },
      '/PluginsAPI': {
        target: 'https://localhost:55434/',
        changeOrigin: true,
        secure: false,
        ws: false
      },  

Privy

Answer 6

I had the same error using React. There seemed to be a problem with building/deploying the project, it got stuck. I simply did a clean on the solution and made sure the api project was set as Startup project. That solved the issue for me.

Inhibitory

Answer 7

check your proxy.conf.js iside src folder in client project . the target should be the same as lunchSettings https configuration inside server project. for example: in proxy.conf.js :

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

and lunchSettings :

"https": {
  "commandName": "Project",
  "dotnetRunMessages": true,
  "launchBrowser": false,
  "launchUrl": "swagger",
  "applicationUrl": "https://localhost:40443;http://localhost:40080",  //**
  "environmentVariables": {
    "ASPNETCORE_ENVIRONMENT": "Development",
    "ASPNETCORE_HOSTINGSTARTUPASSEMBLIES": "Microsoft.AspNetCore.SpaProxy"
  }

Manara

Answer 8

I was also getting this error message. What fixed it for me is by going to start button and pressing the drop down arrow then pressing configure StartUp Projects.

Then make sure you have you have multiple startup projects selected. then select your server application and make sure it starts before the client application, using the arrows on the right.

Moonier