The SPA default page middleware could not return the default page '/index.html' in production application

[danobri]

I have an ASP.Net Core / Angular 5 application that is logging errors to the Windows Event Log in our production environment. The following error is getting logged frequently but intermittently in production, and I have no idea why. The application is definitely in production mode, has been published, and is functioning.

System.InvalidOperationException: The SPA default page middleware could not return the default page '/index.html' because it was not found, and no other middleware handled the request. Your application is running in Production mode, so make sure it has been published, or that you have built your SPA manually. Alternatively you may wish to switch to the Development environment.

AFAIK no users are experiencing a problem with the site when these errors occur. Any idea why these errors are being thrown, and whether there is in fact a problem that needs to be addressed?

[Spaier]

Do angular output directory and specified path in services.AddSpaStaticFiles(configuration => configuration.RootPath = $"your/output/path"); match? Files in the specified folder must be computed to publish in your .csproj file like this:

  <Target Name="PublishRunWebpack" AfterTargets="ComputeFilesToPublish">
    <!-- Include the newly-built files in the publish output -->
    <ItemGroup>
      <DistFiles Include="your\output\path\**" />
      <ResolvedFileToPublish Include="@(DistFiles->'%(FullPath)')" Exclude="@(ResolvedFileToPublish)">
        <RelativePath>%(DistFiles.Identity)</RelativePath>
        <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
      </ResolvedFileToPublish>
    </ItemGroup>
  </Target>

[danobri]

I am setting the RootPath to the Angular dist folder:

services.AddSpaStaticFiles(configuration =>
{
  configuration.RootPath = "ClientApp/dist";
});

And here is what's in my .csproj file:

<PropertyGroup>
    <TargetFramework>netcoreapp2.0</TargetFramework>
    <TypeScriptCompileBlocked>true</TypeScriptCompileBlocked>
    <IsPackable>false</IsPackable>
    <SpaRoot>ClientApp\</SpaRoot>
    <DefaultItemExcludes>$(DefaultItemExcludes);$(SpaRoot)node_modules\**</DefaultItemExcludes>
    <!-- Set this to true if you enable server-side prerendering -->
    <BuildServerSideRenderer>false</BuildServerSideRenderer>
</PropertyGroup>

<Target Name="PublishRunWebpack" AfterTargets="ComputeFilesToPublish">
    <!-- As part of publishing, ensure the JS resources are freshly built in production mode -->
    <Exec WorkingDirectory="$(SpaRoot)" Command="npm install" />
    <Exec WorkingDirectory="$(SpaRoot)" Command="npm run build -- --prod" />
    <Exec WorkingDirectory="$(SpaRoot)" Command="npm run build:ssr -- --prod" Condition=" '$(BuildServerSideRenderer)' == 'true' " />

    <!-- Include the newly-built files in the publish output -->
    <ItemGroup>
      <DistFiles Include="$(SpaRoot)dist\**; $(SpaRoot)dist-server\**" />
      <DistFiles Include="$(SpaRoot)node_modules\**" Condition="'$(BuildServerSideRenderer)' == 'true'" />
      <ResolvedFileToPublish Include="@(DistFiles->'%(FullPath)')" Exclude="@(ResolvedFileToPublish)">
        <RelativePath>%(DistFiles.Identity)</RelativePath>
        <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
      </ResolvedFileToPublish>
    </ItemGroup>
  </Target>

I'm wondering if my problem is that I still have the SSR build instructions in the csproj even though SSR is not enabled, and dist-server does not exist..?

[Spaier]

SSR isn't the problem. You should set path in ConfigureServices() method via services.AddSpaStaticFiles(configuration => configuration.RootPath = $"ClientApp/dist");. Then in Configure you shouldn't specify source path:

app.UseSpaStaticFiles();
app.UseSpa(configuration => { /*spa.Options.SourcePath = "ClientApp";*/ });

spa.Options.SourcePath is only used in development build judging from its' description.

[danobri]

Sorry - not sure if you saw my edit, but I was in fact setting the RootPath correctly, I was just looking in the wrong place. :) I will try removing the SourcePath setting, however, I'm fairly certain this configuration came with the dotnet new angular template. What is the SourcePath setting used for and why shouldn't it be set?

[Spaier]

This is used to determine the folder where package.json scripts should be executed.
Like new AngularCliBuilder(npmScript: "build:ssr") or spa.UseAngularCliServer(npmScript: "start");.

app.UseSpa(spa =>
{
    spa.Options.SourcePath = "ClientApp";

    spa.UseSpaPrerendering(options =>
    {
        options.BootModulePath = $"{spa.Options.SourcePath}/dist-server/main.bundle.js";
        options.BootModuleBuilder = env.IsDevelopment()
            ? new AngularCliBuilder(npmScript: "build:ssr")
            : null;
        options.ExcludeUrls = new[] { "/sockjs-node" };
    });

    if (env.IsDevelopment())
    {
        spa.UseAngularCliServer(npmScript: "start");
    }
});

[danobri]

Thanks - I am using a proxy:

spa.UseProxyToSpaDevelopmentServer("https://localhost:4200");

So sounds like I probably don't need the SourcePath setting. That said - are you saying the SourcePath setting is the cause of the errors in my production environment?

[Spaier]

No, SourcePath does nothing if you use proxy during development. Application probably can't find index.html because it wasn't specified like this: services.AddSpaStaticFiles(configuration => configuration.RootPath = $"ClientApp/dist");

[danobri]

I think maybe you aren't seeing the edits I made to my original response. I am setting the RootPath as suggested. (Maybe try refreshing the this Github page to ensure you are seeing the latest content).

[Spaier]

Now I see it. Can you show what's inside of UseSpa()?

[danobri]

Not much... Will of course remove the SourcePath setting since it's not needed, but this is what is currently in production:

app.UseSpa(spa =>
{
  spa.Options.SourcePath = "ClientApp";
  
  if (env.IsDevelopment())
  {
    spa.UseProxyToSpaDevelopmentServer("https://localhost:4200");
  }
});

[Spaier]

Is index.html present after build in ClientApp/dist? I'd try to remove node_modules and install again, remove SourcePath and redeploy.

[danobri]

Index.html is present in clientapp/dist, otherwise the application wouldn't function at all - that is what is confusing about the error message. The error is being logged in a production application that seems to working fine. I will try removing the node_modules folder locally, and then rebuild and republish and see if that makes a difference. What makes you think that will resolve the error?

[danobri]

Removing the node_modules folder and republishing did not solve the issue - still seeing quite a few of these errors logged on the production server. Any idea why that would be?

[joshberry]

I'm seeing the same issue as @danobri on a production site that appears to be working fine otherwise. The exceptions are intermittent, but persistent. I'm using the Angular spa template pretty much straight away with SSR enabled.

[joshpearce]

It's an IIS Default Document issue. Just add the following to your web.config:

<system.webServer>
   ...
      <defaultDocument enabled="false" />
</system.webServer>

[waynebrantley]

I have this same issue in production - using SPA for react.
Everything about the site works fine - except for getting this exception.
Got the exception near initial deployment....then received about 100 of the exceptions within a couple of minutes around 8 hour later (was it an app pool reset?). I cannot make it happen by resetting the pool, etc. I did not experience the error on 2.1.2, but started getting it with 2.1.3 (however it is intermittent - so may not be determining factor)

[waynebrantley]

So, it was our vulnerability scanner that caused the exceptions to be generated. This means I can now reproduce it by scanning the IP this core app is installed on. I tried the defaultDocument enabled=false in web.config, with no success. (running scanner gave errors again)

Any ideas @SteveSandersonMS ?

[grascioni]

I'm also getting this error randomly in a couple of production sites that work just fine.

ASP.NET Core 2.1, using React 16 in the front end.

Below are the relevant parts of my Startup class. I get these notifications at off hours so it might be some scanner. Nothing critical but I'd love to solve it. Any help appreciated. Thanks!

        services.AddSpaStaticFiles(configuration =>
        {
            configuration.RootPath = "ClientApp/build";
        });


        app.UseSpa(spa =>
        {
            spa.Options.SourcePath = "ClientApp";

            if (env.IsDevelopment())
            {
                spa.UseReactDevelopmentServer(npmScript: "start");
            }
        });

[maxisam]

Here is our case for past 2 days. It is really random. We have 3 servers and one of them barely has this issue in last 48 hours but it did have a lot before that.

[mjtpena]

This happened to my Azure App Service. All I had to do was to restart the service. Worked like charm.

[addikhann]

check angular.json file use "outputPath": "dist",

And Startup file

services.AddSpaStaticFiles(configuration =>
{
configuration.RootPath = "ClientApp/dist";
});

[waynebrantley]

My case is a reactjs app. Also, restarting the service does not help. The service is not down. It is a error caused by requests from vulnerability scanners (or from systems trying to exploit the vulnerability)

[CodySchrank]

I can't even get a dotnet new react to start in production (building with dotnet publish -c Release) without it throwing this exception:
System.InvalidOperationException: The SPA default page middleware could not return the default page '/index.html' because it was not found, and no other middleware handled the request...

Seems like there is definitely a bug in the building process of the spa somewhere?

@SteveSandersonMS
@Eilon

[Eilon]

@ryanbrandenburg / @mkArtakMSFT - any ideas?

[JohnGalt1717]

So the reason we're getting this is someone is trying to POST AND OPTIONS to /index.html not GET. Which causes this error message and causes a 500 error.

Of course of Azure/IIS sees too many errors in too short a time it tries and recycles the app. the problem is that it's doing it over and over again which causes everything in that App Service Plan to crash. :<

How do we properly handle this without the site throwing a 500 error?

Note that this only happens in production, not development and as far as I can tell there is no way to handle this error with your own route. This is a major DOS attack vector in spa services that needs to be fixed ASAP.

[joshberry]

Would be nice if an error wasn't the default behavior. I was able to prevent the exceptions using a rewrite rule in my web.config.

<rewrite>
  <rules>
    <rule name="Prevent requests to index">
      <match url="^index\.html$" />
      <action type="Redirect" url="/" redirectType="Permanent" appendQueryString="true" />
    </rule>
  </rules>
</rewrite>

[rpmansion]

I also had this issue what I did is use the rewrite middleware by doing the below.

app.UseRewriter(new RewriteOptions()
                .AddRedirect("index.html", "/"));

[rachelfreeman]

I would really like to see the root of this problem solved. We have a .net core 2.1 app with the latest React version, no web config since we are using json files for environment variables. We are randomly getting this error several times at once. Most of the time it's fine and then randomly it will happen a dozen times. The redirect seems to just be a work around and not solve the root issue.

[yakeer]

Anyone has got a solution for this?
I'm facing the same issue, can't get the app deployed successfully..

[waynebrantley]

Seems like these javascript services are unsupported?
@SteveSandersonMS can you advise what course of action to take?

[KalpeshPopat]

You seem to have the solution, nice way to ask for help ? what you need to understand is that your production environment issues cannot be solved by looking at the source code.

you should be mapping the content of your publish folder which is at following path "angular12/WebAPI with Angular/WebAPI with Angular/bin/Release/net5.0/publish/" correctly under iis.

If not then you need to read the link i have shared earlier and click on iis.

[rlm42]

Mate I did ask for help nicely, read my first post again. What's your problem? If you don't want to help that's fine. Been stuck on this for a while. I just hosted the server and client seperately and it works fine. I think that's the way to go. Thanks for responding anyway!

[KalpeshPopat]

my bad, you were prompting suggestion to the person who was trying to help you, it was sort of distracting. anyways good to know your problem is solved. i would still try and host server and client together, let's try again ?

the only files that really has any say on the hosted environment is startup.cs and appsetting file and i notice one piece of code that is not consistent in the startup.cs file

the code on line no. 52 should point to your published folder of angular - this is correct
the code on line no. 96 should point to your source code folder of angular - this is wrong, correct value as per your folder structure is "ClientApp"

once this is corrected, try publishing again from step 1 to z

It will be easy to diagnose the issue if you can share your hosted environment configuration. cheers.

[rlm42]

my bad, you were prompting suggestion to the person who was trying to help you, it was sort of distracting. anyways good to know your problem is solved. i would still try and host server and client together, let's try again ?

the only files that really has any say on the hosted environment is startup.cs and appsetting file and i notice one piece of code that is not consistent in the startup.cs file

the code on line no. 52 should point to your published folder of angular - this is correct
the code on line no. 96 should point to your source code folder of angular - this is wrong, correct value as per your folder structure is "ClientApp"

once this is corrected, try publishing again from step 1 to z

It will be easy to diagnose the issue if you can share your hosted environment configuration. cheers.

Sorry bro all good. I did that this, though the output path when published is ClientApp/dist. Where is the hosted environment configuration? I appreciate your help.

I just get a white screen when pointed to the correct location:

[KalpeshPopat]

i need to see your published structure and its environment and configuration. I thought you were using iis please confirm, since the error file appears to be of kestrel.

do you want to take this offline ? once sorted we can publish the solution here on git.

[rlm42]

i need to see your published structure and its environment and configuration. I thought you were using iis please confirm, since the error file appears to be of kestrel.

do you want to take this offline ? once sorted we can publish the solution here on git.

Ok add me on Skype, rlm042.

[buchatsky]

In VS 2022 with .Net Core 6 the standard ASP.Net Angular project template does not return index.html at all in Production mode.
And I fixed that with the following code:

// Serve files from wwwroot
app.UseStaticFiles();
// In production, serve Angular files and default page from ClientApp/dist
if (!app.Environment.IsDevelopment())
{
    app.UseFileServer(new FileServerOptions
    {
        FileProvider = new PhysicalFileProvider(Path.Combine(app.Environment.ContentRootPath, "ClientApp/dist"))
    });
}

PS. But it also requires changing the SPA deployment folder from wwwroot to ClientApp/dist (as it was in ASP.Net Core 3.1 template):
<!--<RelativePath>wwwroot\%(RecursiveDir)%(FileName)%(Extension)</RelativePath>--> <RelativePath>%(DistFiles.Identity)</RelativePath>

[HappyNomad]

Finally, I figured out this framework bug's root cause and how to work around it. You work around it by fixing another bug that you may not even realize is in your code. The other bug, and how to fix it (and thus work around the framework bug), are described here.

[Redart98]

I've used the following middleware, that check if allowed method is used before passing control to the Spa:

    public static class SpaExtensions
    {
        public static void UseGuardedSpa(this IApplicationBuilder app, Action<ISpaBuilder> configuration)
        {
            // Prevent 500 error if POST invoked on '/' 
            app.Use(async (context, next) =>
            {
                if (context.GetEndpoint() == null && !HttpMethods.IsGet(context.Request.Method) && !HttpMethods.IsHead(context.Request.Method))
                {
                    context.Response.StatusCode = 404;
                    await context.Response.WriteAsync($"Forbidden {context.Request.Method}");
                }
                else
                {
                    await next();
                }
            }
            );
            app.UseSpa(configuration);
        }

    }

And then instead of app.UseSpa in Configure call app.UseGuardedSpa

[akonyer]

Thank you @Redart98

This is a huge gaping DOS hole in the .net core SPA framework. Yes, it makes sense to redirect routes to the SPA so it can handle routing on the front end, but I'm getting POST requests to index.html that are being redirected to the SPA middleware. It makes no sense.

[ghost]

Thanks for contacting us.
We're moving this issue to the .NET 8 Planning milestone for future evaluation / consideration. Because it's not immediately obvious that this is a bug in our framework, we would like to keep this around to collect more feedback, which can later help us determine the impact of it. We will re-evaluate this issue, during our next planning meeting(s).
If we later determine, that the issue has no community involvement, or it's very rare and low-impact issue, we will close it - so that the team can focus on more important and high impact issues.
To learn more about what to expect next and how this issue will be handled you can read more about our triage process here.

[ghost]

We've moved this issue to the Backlog milestone. This means that it is not going to be worked on for the coming release. We will reassess the backlog following the current release and consider this item at that time. To learn more about our issue management process and to have better expectation regarding different types of issues you can read our Triage Process.

[cssriraman]

In VS 2022 with .Net Core 6 the standard ASP.Net Angular project template does not return index.html at all in Production mode. And I fixed that with the following code:

// Serve files from wwwroot
app.UseStaticFiles();
// In production, serve Angular files and default page from ClientApp/dist
if (!app.Environment.IsDevelopment())
{
    app.UseFileServer(new FileServerOptions
    {
        FileProvider = new PhysicalFileProvider(Path.Combine(app.Environment.ContentRootPath, "ClientApp/dist"))
    });
}

PS. But it also requires changing the SPA deployment folder from wwwroot to ClientApp/dist (as it was in ASP.Net Core 3.1 template): <!--<RelativePath>wwwroot\%(RecursiveDir)%(FileName)%(Extension)</RelativePath>--> <RelativePath>%(DistFiles.Identity)</RelativePath>
Thank you @buchatsky

I am getting error as below:
'IApplicationBuilder' does not contain a definition for 'Environment' and no accessible extension method 'Environment' accepting a first argument of type 'IApplicationBuilder' could be found

Do you have any solution for that?

[wtdrog]

I have this issue too with ASP.NET Core 6 and Microsoft.AspNetCore.SpaServices.Extensions with version 6.0.22 referenced in .csproj.
As I see it, SpaDefaultPageMiddleware uses StaticFileMiddleware to serve a default page, assuming that it would run the next middleware part only when there is no such file in the filesystem, but actually StaticFileMiddleware does not serve the file not because there is none, but because the request method is wrong.
As SpaDefaultPageMiddleware is a catch-all middleware that should just serve a single file, I think it should handle the case when a request was sent with an inappropriate header and return a 405 status code instead of trying to serve the file with StaticFileMiddleware.