ASP.NET Core with React - 431 Request headers too long

Question

I have a dotnet application that I start with the dotnet run command. I also have a React app, that I start with yarn start.

When I open the browser on localhost:3000 (where the react app is) the server log looks like this:

....this goes on for long
 Request starting HTTP/1.1 GET http://localhost:5000/build/bundle.js  
info: Microsoft.AspNetCore.Hosting.Internal.WebHost[1]
      Request starting HTTP/1.1 GET http://localhost:5000/build/bundle.js  
info: Microsoft.AspNetCore.Hosting.Internal.WebHost[1]
      Request starting HTTP/1.1 GET http://localhost:5000/build/bundle.js  
info: Microsoft.AspNetCore.Hosting.Internal.WebHost[1]
      Request starting HTTP/1.1 GET http://localhost:5000/build/bundle.js  
info: Microsoft.AspNetCore.Hosting.Internal.WebHost[1]
      Request starting HTTP/1.1 GET http://localhost:5000/build/bundle.js  
info: Microsoft.AspNetCore.Hosting.Internal.WebHost[1]
      Request starting HTTP/1.1 GET http://localhost:5000/build/bundle.js  
info: Microsoft.AspNetCore.Hosting.Internal.WebHost[1]
      Request starting HTTP/1.1 GET http://localhost:5000/build/bundle.js  
info: Microsoft.AspNetCore.Hosting.Internal.WebHost[1]
      Request starting HTTP/1.1 GET http://localhost:5000/build/bundle.js  
info: Microsoft.AspNetCore.Hosting.Internal.WebHost[1]
      Request starting HTTP/1.1 GET http://localhost:5000/build/bundle.js  
info: Microsoft.AspNetCore.Hosting.Internal.WebHost[1]
      Request starting HTTP/1.1 GET http://localhost:5000/build/bundle.js  
info: Microsoft.AspNetCore.Hosting.Internal.WebHost[1]
      Request starting HTTP/1.1 GET http://localhost:5000/build/bundle.js  
info: Microsoft.AspNetCore.Hosting.Internal.WebHost[1]
      Request starting HTTP/1.1 GET http://localhost:5000/build/bundle.js  
info: Microsoft.AspNetCore.Hosting.Internal.WebHost[1]
      Request starting HTTP/1.1 GET http://localhost:5000/build/bundle.js  
info: Microsoft.AspNetCore.Hosting.Internal.WebHost[1]
      Request starting HTTP/1.1 GET http://localhost:5000/build/bundle.js  
info: Microsoft.AspNetCore.Hosting.Internal.WebHost[1]
      Request starting HTTP/1.1 GET http://localhost:5000/build/bundle.js  
info: Microsoft.AspNetCore.Hosting.Internal.WebHost[1]
      Request starting HTTP/1.1 GET http://localhost:5000/build/bundle.js  
info: Microsoft.AspNetCore.Hosting.Internal.WebHost[1]
      Request starting HTTP/1.1 GET http://localhost:5000/build/bundle.js  
info: Microsoft.AspNetCore.Hosting.Internal.WebHost[1]
      Request starting HTTP/1.1 GET http://localhost:5000/build/bundle.js  
info: Microsoft.AspNetCore.Hosting.Internal.WebHost[1]
      Request starting HTTP/1.1 GET http://localhost:5000/build/bundle.js  
info: Microsoft.AspNetCore.Hosting.Internal.WebHost[1]
      Request starting HTTP/1.1 GET http://localhost:5000/build/bundle.js  
info: Microsoft.AspNetCore.Server.Kestrel[17]
      Connection id "0HLMFVTO65C53" bad request data: "Request headers too long."
Microsoft.AspNetCore.Server.Kestrel.Core.BadHttpRequestException: Request headers too long.
   at Microsoft.AspNetCore.Server.Kestrel.Core.BadHttpRequestException.Throw(RequestRejectionReason reason)
   at Microsoft.AspNetCore.Server.Kestrel.Core.Internal.Http.Http1Connection.TakeMessageHeaders(ReadOnlySequence`1 buffer, SequencePosition& consumed, SequencePosition& examined)
   at Microsoft.AspNetCore.Server.Kestrel.Core.Internal.Http.Http1Connection.ParseRequest(ReadOnlySequence`1 buffer, SequencePosition& consumed, SequencePosition& examined)
   at Microsoft.AspNetCore.Server.Kestrel.Core.Internal.Http.Http1Connection.TryParseRequest(ReadResult result, Boolean& endConnection)
   at Microsoft.AspNetCore.Server.Kestrel.Core.Internal.Http.HttpProtocol.ProcessRequests[TContext](IHttpApplication`1 application)
   at Microsoft.AspNetCore.Server.Kestrel.Core.Internal.Http.HttpProtocol.ProcessRequestsAsync[TContext](IHttpApplication`1 application)

After like 15 seconds of this the page loads, but I get an error in the browser console about the bundle.js 431 error.

If I make the RequestHeaders max total size larger for the Kestrel server, the same thing happens but this goes on for even longer and the end result is a 500 server error instead of 431.

Moreover if I try to make a simple DELETE request to the server using postman the result is pretty much the same. As if the request was stuck in an infinite loop and then returns a 431.

Lines from Startup.cs that might be relevant:

services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_2);

// In production, the React files will be served from this directory
services.AddSpaStaticFiles(configuration =>
     {
          configuration.RootPath = "client/build";
     }
);


app.UseMvc(routes =>
            {
                routes.MapRoute(
                    name: "default",
                    template: "{controller}/{action=Index}/{id?}");
            }
);
app.UseSpaStaticFiles();
app.UseSpa(spa =>
            {
                if (env.IsDevelopment())
                    spa.UseProxyToSpaDevelopmentServer("http://localhost:3000");
            }
);

What is going on?

Answer 1

I ran into the same issue, but with Angular, using asp.net core during localhost dev. The solution for me was to set the header size for node in the "start" script inside of my package.json file.

Inside scripts json object:

"start": "node --max-http-header-size=100000 ./node_modules/@angular/cli/bin/ng serve",