[英]Failed to load module script – text/html instead of application/javascript
Angular 12，后端 .NET 5 部署在同一个 IIS 实例上。 没有负载平衡器。
我遇到了一个 text/html 而不是 application/javascript 响应问题，这种问题很少发生，而且似乎是随机的，我无法查明原因。
加载模块脚本失败：服务器以“text/html”的非 JavaScript MIME 类型响应。 根据 HTML 规范对模块脚本强制执行严格的 MIME 类型检查。 Main-es2015.6ed6d8b....js:1
刷新页面解决了问题，但其他网站卡住了。 我不确定它是由 Service Worker 还是其他原因引起的。 发生在 Edge 和 Chrome 上。 Angular 是使用生产模式构建的。
当出现此错误时，页面加载如下：失败
main-es2015.js 都有 text/html 响应，其中的内容是我的 index.html文件，其中添加了脚本/样式引用而不是纯 JavaScript：失败脚本文本/html
关于成功：成功
从相同的错误响应线程Failed to load module script我看到响应但我已经有了：
C#启动：
public void ConfigureServices(IServiceCollection services) {
services.**AddSpaStaticFiles**(configuration => configuration.RootPath = "Client/dist/AngularSpa");
}
public static void Configure(IApplicationBuilder app, IWebHostEnvironment env) {
app.**UseSpaStaticFiles**();
}
角度索引.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
其他脚本也出现此问题：多个脚本未能出现此错误
我的理论：问题是客户端缓存的 index.html 引用了旧的（在部署期间删除）版本文件，但浏览器丢失了缓存的 .js 或出于其他原因尝试从服务器请求现在已删除的文件。 请求通过 IIS 文件系统、.NET 后端并最终回退到 Angular 以进行最终路由匹配。 它返回 index.html，因为如果它是用户直接调用浏览器 URL，它将尝试加载 Angular 应用程序并尝试匹配 Angular 路由。 但是调用是由应用程序发出的，所以它只得到初始的 index.html 响应并中断。 我实现的是在管道 CD 过程中，我将那些旧的散列文件移动到临时文件夹，一旦部署完成，我会从临时文件夹中返回这些文件。 因此，在极少数情况下，应用程序可以加载，然后服务工作者更新程序推送最新版本。
- 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
无法加载模块脚本：需要 JavaScript 模块脚本，但服务器响应 MIME 类型为“text/html”
[英]Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html"
Vue.js 3 - “加载模块脚本失败：服务器以非 JavaScript MIME 类型“text/html”响应
[英]Vue.js 3 - “Failed to load module script: The server responded with a non-JavaScript MIME type of ”text/html"
Flask：加载模块脚本失败：服务器以“text/html”的非 JavaScript MIME 类型响应
[英]Flask: Failed to load module script: The server responded with a non-JavaScript MIME type of “text/html”
无法加载模块脚本：服务器以“text/plain”的非 JavaScript MIME 类型响应
[英]Failed to load module script: The server responded with a non-JavaScript MIME type of "text/plain"
加载模块脚本失败：服务器以非 JavaScript、CSS MIME 类型“text/x-scss”响应
[英]Failed to load module script: The server responded with a non-JavaScript, CSS MIME type of “text/x-scss”
加载模块脚本失败：需要一个 JavaScript 模块 [vite] [react] [golang]
[英]Failed to load module script: Expected a JavaScript module [vite] [react] [golang]
加载模块脚本失败：服务器以“text/plain”的非 JavaScript MIME 类型响应。 对模块强制执行严格的 MIME 类型检查
[英]Failed to load module script: The server responded with a non-JavaScript MIME type of "text/plain". Strict MIME type checking is enforced for module
加载模块脚本失败：服务器以“text/plain”的非 JavaScript MIME 类型响应。 严格的 MIME 类型检查 i
[英]Failed to load module script: The server responded with a non-JavaScript MIME type of "text/plain". Strict MIME type checking i
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.