While everything works perfectly fine locally, an issue arises when the application is deployed to Azure. The problem lies in loading the CSS file and an error message stating "Resource interpreted as Stylesheet but transferred with MIME type text/plain" is displayed.
This error occurs across all browsers. The application itself loads a Single Page Application (SPA) built in React.
Below are the middlewares being used in sequential order:
if (Environment.IsDevelopment())
{
app.UseDeveloperExceptionPage();
}
else
{
app.UseExceptionHandler("/Error");
app.UseHsts();
}
app.UseHttpsRedirection();
app.UseStatusCodePagesWithReExecute("/Home/Error", "?statusCode={0}");
app.UseStaticFiles();
app.UseSpaStaticFiles();
app.UseOurCustomAuthenticate();
app.UseMvc(routes =>
{
routes.MapRoute(
name: "default",
template: "{controller=Home}/{action}/{id?}");
routes.MapRoute(
name: "api",
template: "api/{controller}/{action}/{id?}");
});
app.UseSpa(spa =>
{
spa.Options.SourcePath = "ClientApp";
if(Environment.IsDevelopment())
{
spa.UseReactDevelopmentServer(npmScript: "start");
}
});
The custom authenticate middleware implemented checks if the path starts with "/styles" and will not interfere with its loading process.
This snippet of code shows where the CSS file is included in the cshtml file:
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="~/styles/notFound.css">
</head>
<body class="body-content">
Additionally, here is the location where the styles and images are stored:
https://i.stack.imgur.com/NorhA.png
Although the image loads correctly on the server, the style encounters this persistent issue.
In an attempt to rectify the situation, a modification was made to ensure the correct content-type by updating the custom middleware as follows:
if (httpContext.Request.Path.StartsWithSegments("/styles"))
{
httpContext.Response.ContentType = "text/css";
}
In spite of now showing the proper content-type in the network tab, the style still fails to load. Upon further investigation, it appears that clicking on the css file reveals an empty file.
Despite numerous online resources consulted regarding this matter, a solution has yet to be found.