堆栈内存溢出
  繁体   English   中英

无法加载模块脚本：需要 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"

 原文  2022-04-30 17:39:03  0   5    javascript/ angular/ google-chrome/ kubernetes/ mime-types

问题描述

我在 kube.netes 上部署了我的 angular 应用程序（静态网页）并尝试从 Google Chrome 启动它。 我看到应用程序正在加载，但浏览器上没有显示任何内容。 检查浏览器控制台后，我可以看到此错误

“无法加载模块脚本：需要一个 JavaScript 模块脚本，但服务器以“text/html”的 MIME 类型响应。根据 HTML 规范对模块脚本强制执行严格的 MIME 类型检查。” 对于 (main.js,poylfill.js,runtime.js) 文件。 我研究了几个论坛，一个可能的根本原因可能是<script>标签中的type属性应该是 type=text/javascript 而不是我的 index.html 文件中的type=module执行 ng build 后在 dist 文件夹下生成。 我不知道如何对构建过程中生成的这些标签进行更改，我的 ng-build 命令由 docker 命令负责。

URL 我正在尝试访问将类似于：“http://xxxx:portnum/issuertcoetools

注意：主机xxxx:portnum也将被许多其他应用程序使用。

这个问题有任何解决方法或解决方案吗？

index.html - 在本地运行 ng-build 后生成，（这与我在 kube.netes POD 中看到的相同）

<!DOCTYPE html><html lang="en"><head>
    <meta charset="utf-8">
    <title>Data Generator</title>
    <base href="/">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href="favicon.ico">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <style type="text/css">@font-face{font-family:'Roboto';font-style:normal;font-weight:300;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v29/KFOlCnqEu92Fr1MmSU5fCRc4AMP6lbBP.woff2) format('woff2');unicode-range:U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;}@font-face{font-family:'Roboto';font-style:normal;font-weight:300;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v29/KFOlCnqEu92Fr1MmSU5fABc4AMP6lbBP.woff2) format('woff2');unicode-range:U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}@font-face{font-family:'Roboto';font-style:normal;font-weight:300;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v29/KFOlCnqEu92Fr1MmSU5fCBc4AMP6lbBP.woff2) format('woff2');unicode-range:U+1F00-1FFF;}@font-face{font-family:'Roboto';font-style:normal;font-weight:300;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v29/KFOlCnqEu92Fr1MmSU5fBxc4AMP6lbBP.woff2) format('woff2');unicode-range:U+0370-03FF;}@font-face{font-family:'Roboto';font-style:normal;font-weight:300;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v29/KFOlCnqEu92Fr1MmSU5fCxc4AMP6lbBP.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;}@font-face{font-family:'Roboto';font-style:normal;font-weight:300;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v29/KFOlCnqEu92Fr1MmSU5fChc4AMP6lbBP.woff2) format('woff2');unicode-range:U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;}@font-face{font-family:'Roboto';font-style:normal;font-weight:300;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v29/KFOlCnqEu92Fr1MmSU5fBBc4AMP6lQ.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}@font-face{font-family:'Roboto';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v29/KFOmCnqEu92Fr1Mu72xKKTU1Kvnz.woff2) format('woff2');unicode-range:U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;}@font-face{font-family:'Roboto';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v29/KFOmCnqEu92Fr1Mu5mxKKTU1Kvnz.woff2) format('woff2');unicode-range:U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}@font-face{font-family:'Roboto';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v29/KFOmCnqEu92Fr1Mu7mxKKTU1Kvnz.woff2) format('woff2');unicode-range:U+1F00-1FFF;}@font-face{font-family:'Roboto';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v29/KFOmCnqEu92Fr1Mu4WxKKTU1Kvnz.woff2) format('woff2');unicode-range:U+0370-03FF;}@font-face{font-family:'Roboto';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v29/KFOmCnqEu92Fr1Mu7WxKKTU1Kvnz.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;}@font-face{font-family:'Roboto';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v29/KFOmCnqEu92Fr1Mu7GxKKTU1Kvnz.woff2) format('woff2');unicode-range:U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;}@font-face{font-family:'Roboto';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v29/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}@font-face{font-family:'Roboto';font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v29/KFOlCnqEu92Fr1MmEU9fCRc4AMP6lbBP.woff2) format('woff2');unicode-range:U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;}@font-face{font-family:'Roboto';font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v29/KFOlCnqEu92Fr1MmEU9fABc4AMP6lbBP.woff2) format('woff2');unicode-range:U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}@font-face{font-family:'Roboto';font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v29/KFOlCnqEu92Fr1MmEU9fCBc4AMP6lbBP.woff2) format('woff2');unicode-range:U+1F00-1FFF;}@font-face{font-family:'Roboto';font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v29/KFOlCnqEu92Fr1MmEU9fBxc4AMP6lbBP.woff2) format('woff2');unicode-range:U+0370-03FF;}@font-face{font-family:'Roboto';font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v29/KFOlCnqEu92Fr1MmEU9fCxc4AMP6lbBP.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;}@font-face{font-family:'Roboto';font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v29/KFOlCnqEu92Fr1MmEU9fChc4AMP6lbBP.woff2) format('woff2');unicode-range:U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;}@font-face{font-family:'Roboto';font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v29/KFOlCnqEu92Fr1MmEU9fBBc4AMP6lQ.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}</style>
    <style type="text/css">@font-face{font-family:'Material Icons';font-style:normal;font-weight:400;src:url(https://fonts.gstatic.com/s/materialicons/v128/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2) format('woff2');}.material-icons{font-family:'Material Icons';font-weight:normal;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:'liga';-webkit-font-smoothing:antialiased;}</style>
<style>.mat-typography{font:400 14px/20px Roboto,Helvetica Neue,sans-serif;letter-spacing:normal}html,body{height:100%}body{margin:0;font-family:Roboto,Helvetica Neue,sans-serif}</style><link rel="stylesheet" href="styles.9c0548760c8b22be.css" media="print" onload="this.media='all'"><noscript><link rel="stylesheet" href="styles.9c0548760c8b22be.css"></noscript></head>

<body class="mat-typography">
    <app-root></app-root>
 
<script src="runtime.397c3874548e84cd.js" type="module">
</script><script src="polyfills.2145acc81d0726ab.js" type="module">
</script><script src="main.a655dca28148b7e2.js" type="module"></script>

</body></html>

nginx.conf文件

worker_processes 4;

events { worker_connections 1024; }

http {
    server {
        listen 8080;
        include /etc/nginx/mime.types;

  location /issuertcoetools {
    root /usr/share/nginx/html;
    index index.html index.htm;
    try_files $uri $uri/ /index.html =404;
  }
}
}

5 个解决方案

解决方案1
 1 已采纳  2022-05-19 17:48:38

This error usually happens because you deployment was into a subfolder, so it seems like Angular is fetching you app directly from your base URL, so your html is found when you go to your domain.com/mysubfolder/index.html , but as the Angular 从domain.com/index.html而不是 domain.com/mysubfolder/index.html 获取您的资源； 我很确定这是您的问题的原因。 您可以通过以下方式解决它构建您的应用程序：

ng build --prod --base-href mysubfolder

解决方案2
 1  2022-10-01 02:24:44

我试图在子目录中添加一个 Angular 应用程序。

@Leo的回答是正确的。 我通过更改index.html中的基本参考来手动制作它。

从<base href="">到<base href="http://subdomain.domain.com/subdirectory/">并且成功了！ 

 <:DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Website</title> <.-- <base href=""> --> <base href="http.//subdomain,domain.com/subdirectory/"> <meta name="viewport" content="width=device-width. initial-scale=1"> <link rel="icon" type="image/x-icon" href="favicon.ico"> <body>...</body> </html>

解决方案3
 0  2022-08-06 20:27:27

检查include /etc/nginx/mime.types; 在 NGINX conf 中，该路径可能有错误，依靠日志（nginx）。

解决方案4
 0  2023-01-09 06:12:52

当您在虚拟目录上托管 angular 项目时，您需要添加：

 APP_BASE_HREF, useValue: '/YOR VIRTUAL DIRECTORY NAME'

到“NgModule”部分中的“app.module.ts”。 像这样：

import { APP_BASE_HREF } from '@angular/common';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    NgbModule
  ],
  providers: [{provide: APP_BASE_HREF, useValue: '/YOUR_VIRTUALDIRECTORY_NAME'}],
  bootstrap: [AppComponent]
})

并重建你的项目。

不要忘记使用：

import { APP_BASE_HREF } from '@angular/common';

你可以在https://angular.io/api/common/APP_BASE_HREF上看到这个

最后运行：

ng build --base-href  YOUR_VIRTUAL_DIRECTORY_NAME

玩的很开心！

解决方案5
 0  2023-01-25 11:50:27

您可以将 index.html 中的基本标签更改为

<base href="/Your_Angular_App_Name/">

或者

您可以将其保留为<base href="/">并运行以下命令

ng build --prod --base-href /Your_Angular_App_Name/

href 需要指向您的应用程序，否则路径将被破坏。

解决方案6
 0  2023-01-31 09:05:37

我尝试了上面的所有解决方案，但仍然无法加载部署后的页面，使用 APACHE 服务器

加载模块脚本失败：需要 JavaScript 模块脚本，但服务器响应 MIME 类型为“text/html”。 根据 HTML 规范，对模块脚本强制执行严格的 MIME 类型检查。 health:1 拒绝应用来自“https://example.com/styles.e187b08add447092.css”的样式，因为它的 MIME 类型（“text/html”）不是受支持的样式表 MIME 类型，并且启用了严格的 MIME 检查。 健康：1 无法解码下载的字体：https： https://example.com/assets/fonts/roboto/Roboto-Regular.woff2健康：1 OTS 解析错误：无效的 sfntVersion：1008813135 健康：1 拒绝从“https: //example.com/scripts.b7cebc1258dbcca8.js' 因为它的 MIME 类型（'text/html'）不可执行，并且启用了严格的 MIME 类型检查。 polyfills.9d7dfbed301bc3eb.js:1 加载模块脚本失败：需要 JavaScript 模块脚本，但服务器响应 MIME 类型为“text/html”。 根据 HTML 规范，对模块脚本强制执行严格的 MIME 类型检查。 main.2f1233c45cc92915.js:1 加载模块脚本失败：需要 JavaScript 模块脚本，但服务器响应 MIME 类型为“text/html”。 根据 HTML 规范，对模块脚本强制执行严格的 MIME 类型检查。

请帮忙

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 Vue.js 3 - “加载模块脚本失败：服务器以非 JavaScript MIME 类型“text/html”响应 Flask：加载模块脚本失败：服务器以“text/html”的非 JavaScript MIME 类型响应 加载模块脚本失败：服务器以“text/plain”的非 JavaScript MIME 类型响应。 对模块强制执行严格的 MIME 类型检查 加载模块脚本失败：服务器以非 JavaScript、CSS MIME 类型“text/x-scss”响应 无法加载模块脚本：服务器以“text/plain”的非 JavaScript MIME 类型响应 加载模块脚本失败：服务器以非 JavaScript MIME 类型“”响应。 强制执行严格的 MIME 类型检查 加载模块脚本失败：服务器以“text/plain”的非 JavaScript MIME 类型响应。 严格的 MIME 类型检查 i 加载模块脚本失败：服务器响应非 JavaScript MIME 类型“” 从&#39;./image.jpeg&#39;结果导入图像无法加载模块脚本服务器以非JavaScript MIME类型“ image / jpegerror”响应 由于不允许的 MIME 类型，无法加载模块脚本
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM