由于不允许的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服务.整个项目是一个多模块项目,其中棱角部分是一个单独的模块,其中front-end builder
用于将棱角代码构建到单个可执行jar中.使用嵌入式tomcat时,应用程序运行良好.我有一个新要求,即尝试将ui ui部分分别部署在外部tomcat上.但是,当我将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").
在进行了一些Google搜索之后,我了解到出现此问题是因为angular 8 cli无法将type
属性添加到index.html
中的script
标记中.当我手动添加类型时,一切正常.谁能帮助我了解为什么会这样,并且除了手动编辑外,还可以解决该问题.
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 :
- type属性在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
ROOT
which works perfectly as , when I deployed in external tomcat ,I kept the assets under a folder in webapps which meant I had to amend thebaseHref
field (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
MyApp
and specifying that asbaseHref
inindex.html
.
相关链接
推荐答案
<base href="/">
是问题,将其更改为上下文根.或将其更改为
is the issue , change it to your context root . Or change it to
<base href=".">
浏览器无法找到您的JS文件,因为它查找相对于基本href的JS文件.
Browser is unable to find your JS file because it looks for JS file relative to base href.
您的基本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"
您可以想到的另一种解决方案是,如果项目允许,在没有上下文根的情况下部署到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屋!