Add proxying support to the Blazor dev server

[danroth27]

Add proxying support to the Blazor dev server similar to the functionality available from other frontend frameworks, particularly those based on webpack:

• Webpack: https://webpack.js.org/configuration/dev-server/#devserverproxy
• Angular: https://angular.io/guide/build#proxying-to-a-backend-server
• React: https://create-react-app.dev/docs/proxying-api-requests-in-development/
• Vue: https://cli.vuejs.org/config/#devserver-proxy

This functionality is useful when the Blazor WebAssembly app is being developed as a separate project from its backend API during development, but will be deployed to the same domain in production. A common example is a Blazor WebAssembly frontend with an Azure Functions backend.

[javiercn]

@danroth27 can we leverage YARP for this?

Thanks for contacting us.
We're moving this issue to the Next sprint planning milestone for future evaluation / consideration. We will evaluate the request when we are planning the work for the next milestone. To learn more about what to expect next and how this issue will be handled you can read more about our triage process here.

[danroth27]

We have proxy middleware in the aspnet/asplabs repo: https://github.com/aspnet/AspLabs/tree/master/src/Proxy. I'm not sure if YARP is using that or not. @Tratcher?

We also have some proxying logic in SpaServices.Extensions that I believe @SteveSandersonMS wrote.

[javiercn]

I believe the main things here are to rewrite/forward requests and rewrite things like cookies and things like that?

[Tratcher]

@danroth27 YARP was "inspired-by" that lab, but the code isn't very similar anymore. The relevant part is here:
https://github.com/microsoft/reverse-proxy/blob/master/src/ReverseProxy/Service/Proxy/HttpProxy.cs

[danroth27]

I believe the main things here are to rewrite/forward requests and rewrite things like cookies and things like that?

That sounds right. The goal is to emulate single origin as much as is possible/reasonable.

[Tratcher]

Just be aware of all the things proxies break.
https://docs.microsoft.com/en-us/aspnet/core/host-and-deploy/proxy-load-balancer?view=aspnetcore-3.1

Things used for url generation, redirects, cookies, etc.:

• Scheme, TLS termination
• Host name & port
• Path Base

Rewriting response headers is one thing, trying to rewrite anything in the content is a very different problem.

[aaronpowell]

A quick win could be to extend the DevServer to use the SpaServices.Extensions middleware as it already contains a proxy feature: https://github.com/dotnet/aspnetcore/tree/master/src/Middleware/SpaServices.Extensions/src/Proxying

To make it interoperable with the way many JavaScript projects work, it could leverage the BrowserSync config proxy structure - https://www.browsersync.io/docs/options#option-proxy

So have it that when the devserver starts up, if it finds a bs-config.json file, then add the middleware and parse the proxy information out of it to setup the middleware.

[javiercn]

I think that the spa services proxy works in combination with the different JS proxies. I think we would no take a dependency on node JS for something like that.

[aaronpowell]

It doesn't appear that it uses anything from Node, the code for the proxy implementation is in https://github.com/dotnet/aspnetcore/blob/master/src/Middleware/SpaServices.Extensions/src/Proxying/SpaProxy.cs and it added middleware to each request (https://github.com/dotnet/aspnetcore/blob/master/src/Middleware/SpaServices.Extensions/src/Proxying/SpaProxyingExtensions.cs#L77-L82) and uses HttpClient to forward the request (https://github.com/dotnet/aspnetcore/blob/master/src/Middleware/SpaServices.Extensions/src/Proxying/SpaProxy.cs#L76-L94).

It looks like prior to .NET 5 the extensions depends on SpaServices, which in turn depends on NodeServices, but if I understand the csproj correctly it's being removed in 5 RTM: (https://github.com/dotnet/aspnetcore/blob/master/src/Middleware/SpaServices.Extensions/src/Microsoft.AspNetCore.SpaServices.Extensions.csproj#L18-L23)

[javiercn]

@aaronpowell yes, but it is proxying that request to the angular/react/webpack proxy that is started by ng run and so on, which in turn are the ones that take care of proxying API requests and things like that.

[aaronpowell]

Isn't it proxying any request that can't be handled by the ASP.Net server to an endpoint that's running whatever the endpoint runs?