无法加载模块脚本＆＃x2013;文本/HTML代替应用程序/JavaScript

发布于 2025-02-02 03:35:27 字数 3255 浏览 4 评论 0原文

Angular 12，Backend .NET 5在部署的同一IIS实例上。没有负载平衡器。

我有一个很少发生的文本/html，而不是application/javascript响应问题，似乎是随机的，我无法查明原因。

无法加载模块脚本：服务器用一个 “文本/html”的非JavaScript MIME类型。严格的MIME类型检查是每个HTML规格为模块脚本强制执行。 main-es2015.6ed6d8b .... JS：1

刷新页面解决了问题，但else网站被卡住了。我不确定这是由服务工作者还是其他原因引起的。发生在Edge和Chrome上。 Angular是通过生产模式构建的。

当此错误出现时，页面加载如下： fafier> fife

两个main-es2015.js都有文本/ html响应和内容是我的index.html 文件，带有添加脚本/样式引用，而不是纯JavaScript：失败脚本文本/html

成功：成功

来自相同的错误响应线程无法加载模块脚本我看到了响应，但我已经有：

C＃C＃启动：

public void ConfigureServices(IServiceCollection services) {
                services.**AddSpaStaticFiles**(configuration => configuration.RootPath = "Client/dist/AngularSpa");
}

public static void Configure(IApplicationBuilder app, IWebHostEnvironment env) {
                app.**UseSpaStaticFiles**();
}

Angular Index.html：

<!DOCTYPE html>
<html lang="en">
  <head>
    <base **href="/"** />
  </head>
  <body>
  </body>
</html>

此错误期间IIS服务器日志：

2022-05-27 13:18:30 W3SVC2 SERVER-XX GET / - 80 - adress Mozilla/5.0+(Windows+NT+10.0;+Win64;+x64)+AppleWebKit/537.36+(KHTML,+like+Gecko)+Chrome/adress+Safari/537.36+Edg/adress
2022-05-27 13:18:30 W3SVC2 SERVER-XX GET /main-es2015.6ed6d8b5172c982059f0.js - 443 - adress Mozilla/5.0+(Windows+NT+10.0;+Win64;+x64)+AppleWebKit/537.36+(KHTML,+like+Gecko)+Chrome/adress
2022-05-27 13:18:32 W3SVC2 SERVER-XX GET /main-es2015.6ed6d8b5172c982059f0.js - 443 adressMozilla/5.0+(Windows+NT+10.0;+Win64;+x64)+AppleWebKit/537.36+(KHTML,+like+Gecko)+Chrome/adress+Safari/537.36+Edg/adress
2022-05-27 13:18:32 W3SVC2 SERVER-XX GET /ngsw-worker.js - 443 adress Mozilla/5.0+(Windows+NT+10.0;+Win64;+x64)+AppleWebKit/537.36+(KHTML,+like+Gecko)+Chrome/adress+Safari/537.36+Edg/adress
2022-05-27 13:18:35 W3SVC2 SERVER-XX GET /ngsw.json ngsw-cache-bust=0.7298837691083289 443 adress Mozilla/5.0+(Windows+NT+10.0;+Win64;+x64)+AppleWebKit/537.36+(KHTML,+like+Gecko)+Chrome/adress+Safari/537.36+Edg/adress
2022-05-27 13:18:35 W3SVC2 SERVER-XX GET /index.html - 443 adress Mozilla/5.0+(Windows+NT+10.0;+Win64;+x64)+AppleWebKit/537.36+(KHTML,+like+Gecko)+Chrome/adress+Safari/537.36+Edg/adress
2022-05-27 13:18:35 W3SVC2 SERVER-XX GET /main-es2015.c448947b8e21da262380.js - 443 adress Mozilla/5.0+(Windows+NT+10.0;+Win64;+x64)+AppleWebKit/537.36+(KHTML,+like+Gecko)+Chrome/adress+Safari/537.36+Edg/adress
2022-05-27 13:18:37 W3SVC2 SERVER-XX GET /main-es5.c448947b8e21da262380.js - 443 adress Mozilla/5.0+(Windows+NT+10.0;+Win64;+x64)+AppleWebKit/537.36+(KHTML,+like+Gecko)+Chrome/adress+Safari/537.36+Edg/adress

此问题也发生在其他脚本中：多个脚本失败了此错误

原文

Angular 12, Backend .NET 5 on same IIS instance deployed. No load balancers.

I’m having a text/html instead of application/javascript response issue that occurs rarely and it seems at random and I can’t pinpoint the cause.

Failed to load module script: The server responded with a
non-JavaScript MIME type of "text/html". Strict MIME type checking is
enforced for module scripts per HTML spec. Main-es2015.6ed6d8b....js:1

Refresh page fixes the issue but else website is stuck. I’m not sure if it’s caused by Service Worker or something else. Happened on both Edge and Chrome. Angular is built with production mode.

When this error is present page loads like this: failure

Both main-es2015.js have text/html response and content inside them is my index.html file with added script/style references instead of pure JavaScript: failure script text/html

On success: success

From same error response thread Failed to load module script I see responses but I already have:

C# startup:

public void ConfigureServices(IServiceCollection services) {
                services.**AddSpaStaticFiles**(configuration => configuration.RootPath = "Client/dist/AngularSpa");
}

public static void Configure(IApplicationBuilder app, IWebHostEnvironment env) {
                app.**UseSpaStaticFiles**();
}

Angular index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <base **href="/"** />
  </head>
  <body>
  </body>
</html>

IIS Server logs during this error:

2022-05-27 13:18:30 W3SVC2 SERVER-XX GET / - 80 - adress Mozilla/5.0+(Windows+NT+10.0;+Win64;+x64)+AppleWebKit/537.36+(KHTML,+like+Gecko)+Chrome/adress+Safari/537.36+Edg/adress
2022-05-27 13:18:30 W3SVC2 SERVER-XX GET /main-es2015.6ed6d8b5172c982059f0.js - 443 - adress Mozilla/5.0+(Windows+NT+10.0;+Win64;+x64)+AppleWebKit/537.36+(KHTML,+like+Gecko)+Chrome/adress
2022-05-27 13:18:32 W3SVC2 SERVER-XX GET /main-es2015.6ed6d8b5172c982059f0.js - 443 adressMozilla/5.0+(Windows+NT+10.0;+Win64;+x64)+AppleWebKit/537.36+(KHTML,+like+Gecko)+Chrome/adress+Safari/537.36+Edg/adress
2022-05-27 13:18:32 W3SVC2 SERVER-XX GET /ngsw-worker.js - 443 adress Mozilla/5.0+(Windows+NT+10.0;+Win64;+x64)+AppleWebKit/537.36+(KHTML,+like+Gecko)+Chrome/adress+Safari/537.36+Edg/adress
2022-05-27 13:18:35 W3SVC2 SERVER-XX GET /ngsw.json ngsw-cache-bust=0.7298837691083289 443 adress Mozilla/5.0+(Windows+NT+10.0;+Win64;+x64)+AppleWebKit/537.36+(KHTML,+like+Gecko)+Chrome/adress+Safari/537.36+Edg/adress
2022-05-27 13:18:35 W3SVC2 SERVER-XX GET /index.html - 443 adress Mozilla/5.0+(Windows+NT+10.0;+Win64;+x64)+AppleWebKit/537.36+(KHTML,+like+Gecko)+Chrome/adress+Safari/537.36+Edg/adress
2022-05-27 13:18:35 W3SVC2 SERVER-XX GET /main-es2015.c448947b8e21da262380.js - 443 adress Mozilla/5.0+(Windows+NT+10.0;+Win64;+x64)+AppleWebKit/537.36+(KHTML,+like+Gecko)+Chrome/adress+Safari/537.36+Edg/adress
2022-05-27 13:18:37 W3SVC2 SERVER-XX GET /main-es5.c448947b8e21da262380.js - 443 adress Mozilla/5.0+(Windows+NT+10.0;+Win64;+x64)+AppleWebKit/537.36+(KHTML,+like+Gecko)+Chrome/adress+Safari/537.36+Edg/adress

The issue also happened with other scripts:
multiple scripts failing to this error

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

何以笙箫默 2025-02-09 03:35:27

我的理论：问题是客户端缓存索引。请求通过IIS文件系统，.NET后端，最后到Angular进行最终路线匹配。它返回index.html，因为如果用户在浏览器URL上直接调用index.html，它将尝试加载角应用并尝试匹配角路由。但是该呼叫是通过应用程序进行的，因此它仅获得初始索引。html响应和中断。我实现的是在管道CD过程中，我将那些旧的Hashed文件移至temp文件夹，一旦部署完成，我就会从temp文件夹返回这些文件。因此，在这种罕见情况下，应用程序可以加载，然后服务工作者更新机推动最新版本。

    - task: PowerShell@2
      displayName: "Move versioned Angular scripts to temp folder"
      inputs:
        targetType: inline
        script: |
          # Requirement is to have access to the root angular folder directly.
          # Moves hashed js and css files that are 6 months old or newer to %temp% folder
          $dateFromWhichToInclude = (Get-Date).AddMonths(-6).Date; `
          $angularRoot = "${{ parameters.iis_website_physical_path }}\Client\dist\AngularSpa"; `
          $tempFolderPath = Join-Path $Env:Temp previous-version-scripts; `
          New-Item -Type Directory -Path $tempFolderPath -Force | Out-Null; `
          Get-ChildItem -Path $angularRoot | Where-Object{ ($_.Name -match '\.\w{10,30}\.(js|css)') `
          -and ($_.CreationTime -ge $dateFromWhichToInclude) } `
          | Copy-Item -Destination $tempFolderPath –PassThru


    - task: PowerShell@2
      displayName: "Move versioned Angular scripts back from temp folder"
      inputs:
        targetType: inline
        script: |
          # Requirement is to have access to the root angular folder directly.
          # Once files are moved back, the created temp folder is deleted
          $angularRoot = "${{ parameters.iis_website_physical_path }}\Client\dist\AngularSpa"; `
          $tempFolderPath = Join-Path $Env:Temp previous-version-scripts; `
          Copy-Item -Path "$($tempFolderPath)\*" -Destination $angularRoot –PassThru; `
          Remove-Item $tempFolderPath -Force -Recurse

My theory: The issue is that client cached index.html references old (deleted during deployment) version files but the browser loses cached .js or for some other reason attempts to request now deleted file from the server. The request fallbacks through IIS filesystem, .NET backend and finally to Angular for final route match. It returns index.html because if it was direct call on browser URL by the user it would attempt to load Angular app and attempt matching Angular route. But the call was made by application so it gets just initial index.html response and breaks. What I implemented is during pipeline CD process I move those old hashed files to temp folder and once deployment is done I return those files from the temp folder. So in those rare situations the application can load and then service worker updater pushes the latest version.

    - task: PowerShell@2
      displayName: "Move versioned Angular scripts to temp folder"
      inputs:
        targetType: inline
        script: |
          # Requirement is to have access to the root angular folder directly.
          # Moves hashed js and css files that are 6 months old or newer to %temp% folder
          $dateFromWhichToInclude = (Get-Date).AddMonths(-6).Date; `
          $angularRoot = "${{ parameters.iis_website_physical_path }}\Client\dist\AngularSpa"; `
          $tempFolderPath = Join-Path $Env:Temp previous-version-scripts; `
          New-Item -Type Directory -Path $tempFolderPath -Force | Out-Null; `
          Get-ChildItem -Path $angularRoot | Where-Object{ ($_.Name -match '\.\w{10,30}\.(js|css)') `
          -and ($_.CreationTime -ge $dateFromWhichToInclude) } `
          | Copy-Item -Destination $tempFolderPath –PassThru


    - task: PowerShell@2
      displayName: "Move versioned Angular scripts back from temp folder"
      inputs:
        targetType: inline
        script: |
          # Requirement is to have access to the root angular folder directly.
          # Once files are moved back, the created temp folder is deleted
          $angularRoot = "${{ parameters.iis_website_physical_path }}\Client\dist\AngularSpa"; `
          $tempFolderPath = Join-Path $Env:Temp previous-version-scripts; `
          Copy-Item -Path "$($tempFolderPath)\*" -Destination $angularRoot –PassThru; `
          Remove-Item $tempFolderPath -Force -Recurse

回复收藏 0 原文

~没有更多了~