허용되지 않는 MIME 유형("text/html")으로 인해 차단됨: Tomcat 9.0.30에 배포된 Angular 8이 자산을 처리하지 못함
사용자 인터페이스가 angular 8에 기반하고 백엔드가 springboot java 서비스인 프로젝트가 있습니다.프로젝트 전체가 멀티 모듈프로젝트이며 각도 부품은 다른 모듈로 되어 있습니다.front-end builder각도 코드를 단일 실행 파일 항아리로 만드는 데 사용됩니다.내장된 Tomcat을 사용하면 응용 프로그램이 정상적으로 실행됩니다.angular ui 파트를 외부 Tomcat에 개별적으로 배치해야 하는 새로운 요건이 있습니다.단, dist 폴더를 webapps 폴더에 복사하여 서비스를 제공하려고 하면 브라우저는 다음과 같이 요청을 차단합니다.
Loading module from “http://localhost:8080/polyfills-es2015.js” was blocked because of a disallowed MIME type (“text/html”).
몇 가지 구글 검색을 실행한 후, 나는 이 문제가 angular 8 cli를 추가하는 데 실패했기 때문에 발생한다는 것을 이해하게 되었습니다.type의 탓으로 돌리다script을 추가하다index.html수동으로 타입을 추가하면 모든 것이 정상적으로 동작합니다.왜 이런 일이 일어나는지, 그리고 수동 편집 이외의 문제에 대한 수정 가능성을 이해하는 데 도움을 주실 수 있나요?
생성됨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>
따라서, 효과가 있는 모든 것을 요약하면 다음과 같습니다.
- HTML5에서는 type Atribute가 필수가 아니기 때문에 angular cli에서는 Atribute로 추가되지 않습니다.embedded tomcat에서는 에셋이 에 복사되어 있었습니다.
ROOT외부 Tomcat에 배치했을 때 웹 어플리케이션의 폴더 아래에 자산을 보관하고 있었습니다.즉, 이 경우,baseHref필드(명령어를 사용하여 빌드하는 동안 또는 수동으로 빌드한 후)를 동일하게 반영합니다.다음 기능이 있습니다. - 웹 앱에서 자산을 ROOT 폴더에 보관합니다(js 파일이 루트 / 아래에 있으므로 모든 것이 완벽하게 작동합니다).
- 예를 들어 폴더 아래에 파일 보관
MyApp라고 명기하고 있습니다.baseHref에index.html.
관련 링크
<base href="/">
이 문제이므로 컨텍스트루트로 변경합니다.또는 로 변경합니다.
<base href=".">
브라우저는 기본 href에 상대적인 JS 파일을 찾기 때문에 JS 파일을 찾을 수 없습니다.
기본 href= "/"이므로 "localhost:8080/"에 있는 모든 js 파일을 찾지만 JS 파일은 "localhost:8080/someRoot"에 있을 수 있습니다.
생각할 수 있는 또 하나의 솔루션은 out context root를 사용하여 Tomcat의 ROOT 폴더에 전개하는 것입니다.
나는 이 문제로 한동안 골머리를 앓았다.하지 않은 은 꼭 있어..js수입하다
서버는 JS 파일이 HTML 파일이라고 생각합니다.
이것은, 서버측의 인식에 버그가 있거나 JS파일이 존재하지 않기 때문일 가능성이 있습니다(서버가 404 상태 코드를 송신하지 않는 경우).js가 없습니다.
타입의 「」, 「」를 합니다.text/html.
브라우저는 콘텐츠유형을 확인하고 이것이 css가 아닌 것으로 간주하여 허용하지 않습니다.
타입(클라이언트측)을 지정하거나 타입 서버측을 변경하면 동작합니다.
이것은 나의 바닐라 JS 프로젝트에서 효과가 있었던 솔루션이다.
문제 설명:브라우저가 원하는 파일을 찾을 수 없기 때문에 스크립트 요청에 대한 응답으로 404 HTML 페이지를 보냅니다(js를 기다리지만 대신 html을 가져옵니다).
에는 type=Importtype="display" ex:
<script type="module" src="./main.js"></script>.ex: "Import" .js ex로 .
import characterData from "./modules/data.js";그래도 작동하지 않으면 가져온 내용을 모두 제거한 후 다시 작성합니다(VShode에서 더 많은 도움이 됨).
깨지면 .
main.jsroot 폴더에 합니다.modules표시
언급URL : https://stackoverflow.com/questions/59925804/blocked-because-of-a-disallowed-mime-type-text-html-angular-8-deployed-on
'programing' 카테고리의 다른 글
| jAJAX 콜의 jQuery 콜백 (0) | 2023.03.06 |
|---|---|
| Redx 동기식 또는 비동기식으로 store.dispatch를 실행한다. (0) | 2023.03.06 |
| Spring Boot + IntelliJ + Embedded Database = 두통 (0) | 2023.03.06 |
| 커서/케어 위치를 설정하는 가장 좋은 방법은 무엇입니까? (0) | 2023.03.06 |
| REST API에 연결하기 위한 Wordpress 플러그인? (0) | 2023.03.06 |