Angular 6 : Refused to execute script from 'URL' because its MIME type( ) is not executable, & strict MIME type checking is enabled

Question

Getting following error while running .net Core Angular 6 SPA application :
The value for MIME type is blank :

Index.html File :

<html lang="en">
<head>
  <meta charset="utf-8">
  <title>APP</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root>
    <div id="startup-message">
      <h1></h1>
      <p><span></span></p>
    </div>
  </app-root>
</body>
</html>

Package.JSON :

Customer Headers added in Web.Config file :

<customHeaders>
     <add name="Access-Control-Allow-Origin" value="*" />  
     <add name="Access-Control-Allow-Headers" value="Content-Type" />  
     <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />  
     <add name="X-Content-Type-Options" value="nosniff" />
  </customHeaders>

99% of the time, this error is server is not giving you the files that angular is requesting js/css/fonts/images — joyBlanks, Oct 01 '19 at 00:48
Your urls seem wrong. The default templates are setup in a way to expect the js files from `~/dist/xxx.js`, not `~/xxx.js`. The SPA middleware will watch for urls starting with `~/dist` and intercept it, to serve the on-the-fly generated files for hot module replacement functionality — Tseng, Oct 01 '19 at 03:13
@SagarK where are bundles getting generated? Outside dist folder? — Vinay sharma, Oct 01 '19 at 07:43
Not sure of your setup. The ASP.NET Core templates set up the bundle generation out of the box (the build scripts are set within the csproj as Build Tasks). I assume you used your own build pipeline or changed the index.html or Home/Index.cshtml where the *.js files are embedded — Tseng, Oct 01 '19 at 11:06

score 1 · Answer 1 · answered Oct 02 '19 at 08:16

1

I could not reproduce your problem.You could create a new asp,net core and Angular template app to check whether the problem exists and compare the files.

It is likely that you have wrong url for the js files.

Besides,X-Content-Type option: nosniff tells the browser to force the MIME of the resource to be loaded.Try to comment out that.

Refer to Disable Chrome strict MIME type checking

answered Oct 02 '19 at 08:16

Ryan

19,118
10
37
53

exactly my problem... no-sniff was the cause. thanks – curiousBoy Apr 12 '23 at 17:31

score 0 · Answer 2 · answered Nov 25 '19 at 19:12

Make sure you configure your static files BEFORE you configure your routes. In other words, something like this:

app.UseHttpsRedirection();

// nb: configure this first!!
app.UseStaticFiles();
if (!env.IsDevelopment())
{
    app.UseSpaStaticFiles();
}

app.UseRouting();

app.UseAuthentication();
app.UseAuthorization();

app.UseEndpoints(endpoints =>
{
    endpoints.MapControllers();
});

app.UseSpa(spa =>
{
    spa.Options.SourcePath = "ClientApp";
    spa.Options.StartupTimeout = new TimeSpan(0, 5, 0);

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

Angular 6 : Refused to execute script from 'URL' because its MIME type( ) is not executable, & strict MIME type checking is enabled

2 Answers2