由于不允许的 MIME 类型(“text/html")而被阻止:部署在 tomcat 9.0.30 上的 Angular 8 无法提供资产 [英] Blocked because of a disallowed MIME type (“text/html”) : Angular 8 deployed on tomcat 9.0.30 fails to serve the assets
问题描述
我有一个项目，其中用户界面基于 angular 8，后端是 springboot java 服务.整个项目是一个多模块项目，其中 angular 部分是一个单独的模块，front-end builder 用于将 angular 代码构建到单个可执行 jar 中.使用嵌入式 tomcat 时，应用程序运行良好.我有一个新要求，即尝试在外部 tomcat 上单独部署 angular ui 部分.但是，当我将 dist 文件夹复制到 webapps 文件夹并尝试为其提供服务时，浏览器会阻止请求说:
I have a project in which the user interface is based on angular 8 and the backend is a springboot java service. The entire project is a multi module project with the angular part being a separate module with front-end builder being used to build the angular code into a single executable jar. The application runs fine when the embedded tomcat is used. I have a new requirement to try and deploy the angular ui part separately on an external tomcat . But when i copy the dist folder to the webapps folder and try to serve it , the browser blocks the request saying :
Loading module from "http://localhost:8080/polyfills-es2015.js" was blocked because of a disallowed MIME type ("text/html").
在进行了一些谷歌搜索后，我了解到问题的发生是因为 angular 8 cli 无法将 type 属性添加到 index.html 中的 .当我手动添加类型时，一切正常.任何人都可以帮助我理解为什么会发生这种情况，以及手动编辑以外的问题的可能解决方案.script 标签.html
After doing some google search I came to understand that the issue occurs because angular 8 cli fails to add the type attribute to the script tag in index.html . When i manually add the type,everything works fine. Can anyone please help me to understand why this is happening, and also a possible fix for the issue other than manual editing.
生成的index.html :
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My Application</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<i class="fas fa-chart-area"></i>
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body style="margin: 0;">
<app-root></app-root>
<script src="runtime-es2015.js" type="module"></script><script src="runtime-es5.js" nomodule defer></script><script src="polyfills-es5.js" nomodule defer></script><script src="polyfills-es2015.js" type="module"></script><script src="styles-es2015.js" type="module"></script><script src="styles-es5.js" nomodule defer></script><script src="scripts.js" defer></script><script src="vendor-es2015.js" type="module"></script><script src="vendor-es5.js" nomodule defer></script><script src="main-es2015.js" type="module"></script><script src="main-es5.js" nomodule defer></script></body>
</html>
所以，总结一下所有有效的方法，如下:
So, to summarize everything that works , it's as follows :
- 类型属性在 HTML5 中不再是强制性的，因此 angular cli 不再将其添加为属性.在嵌入式 tomcat 中，资产被复制到
ROOT完美运行，因为当我部署在外部 tomcat 中时，我将资产保存在 webapps 的文件夹下，这意味着我必须修改baseHref字段(在使用命令构建期间或手动构建之后)以反映相同的内容.以下工作: - 将资源保存在 webapps 的 ROOT 文件夹下(一切正常，因为 js 文件现在位于根目录/下).
- 将文件保存在一个文件夹下，例如
MyApp并在index.html中将其指定为baseHref.
- The type attribute is no longer mandatory in HTML5, hence angular cli no longer adds it as an attribute. In embedded tomcat , the assets were being copied to the
ROOTwhich works perfectly as , when I deployed in external tomcat ,I kept the assets under a folder in webapps which meant I had to amend thebaseHreffield (either during build using command or after build manually) to reflect the same. The following works : - Keeping the assets under ROOT folder in webapps (everything works perfectly because the js files are now under the root / ).
- Keeping the files under a folder say for instance
MyAppand specifying that asbaseHrefinindex.html.
相关链接
推荐答案
<base href="/">
是问题，将其更改为您的上下文根.或者改成
is the issue , change it to your context root . Or change it to
<base href=".">
浏览器无法找到您的 JS 文件，因为它寻找与 base href 相关的 JS 文件.
Browser is unable to find your JS file because it looks for JS file relative to base href.
你的 base href="/" ，所以它会在 "localhost:8080/" 中查找所有 js 文件，但是您的 JS 文件可能存在于localhost:8080/someRoot"
Your base href= "/" , so it looks for all js file in the in "localhost:8080/", but your JS files might have present in "localhost:8080/someRoot"
您可以想到的另一种解决方案是，如果您的项目允许，则在没有上下文 root 的情况下部署在 tomcat 的 ROOT 文件夹中
One more solution you can think of is, deploying in the ROOT folder of tomcat with out context root , if that is allowed for your project
这篇关于由于不允许的 MIME 类型(“text/html")而被阻止:部署在 tomcat 9.0.30 上的 Angular 8 无法提供资产的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
