Javascript 将 jQuery 插件导入 Angular 2+ 拒绝执行脚本，因为其 MIME 类型 ('text/html') 不可执行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/49905882/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Importing jQuery plugin into Angular 2+ Refused to execute script because its MIME type ('text/html') is not executable
提问by BBaysinger
I need to load a JavaScript (jQuery plugin) in an HTML file. But it doesn't seem to be working. This is running on Angular-CLI server (ng serve) Here's the HTML.
我需要在 HTML 文件中加载 JavaScript（jQuery 插件）。但它似乎不起作用。这是在 Angular-CLI 服务器 (ng serve) 上运行的。这是 HTML。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<base href="/">
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script src="./test.js" type="text/javascript"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root>Loading...</app-root>
</body>
</html>
I get this error:
我收到此错误：
Refused to execute script from 'http://localhost:8080/test.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.
拒绝执行来自 ' http://localhost:8080/test.js' 的脚本，因为它的 MIME 类型 ('text/html') 不可执行，并且启用了严格的 MIME 类型检查。
I found this question, where the solution seems to be correcting the typeattribute, but that didn't fix it for me. I tried text/javascriptand application/javascript.
我发现了这个问题，其中的解决方案似乎正在纠正type属性，但这并没有为我解决。我试过text/javascript和application/javascript。
What do I need to do here?
我需要在这里做什么？
EDIT: The network console shows a 404 error for the script. Says the request has no response data available. Content type says text/html; charset=utf-8
编辑：网络控制台显示脚本的 404 错误。说请求没有可用的响应数据。内容类型说text/html; charset=utf-8
NOTE: I originally posted this as a more minimal example than my actual code, as I didn't think it had to do with Angular CLI server. That may be the case, so I restored my example to the actual code I have.
注意：我最初将此作为一个比我的实际代码更小的示例发布，因为我认为它与 Angular CLI 服务器无关。可能是这种情况，所以我将我的示例恢复为我拥有的实际代码。
回答by David
Try putting your js script in the src/assetsfolder. Then it should be served with correct mime type by the development server
尝试将您的 js 脚本放在src/assets文件夹中。然后它应该由开发服务器提供正确的 MIME 类型
Then reference it like below
然后像下面这样引用它
<script src="/assets/scripts/test.js" type="text/javascript"></script>
Rather than including jquery and your script in index.html, you could add the files to the "scripts" properties of angular-cli.json(or angular.jsonif using angular 6)
而不是在 index.html 中包含 jquery 和您的脚本，您可以将文件添加到angular-cli.json（或者angular.json如果使用 angular 6）的“脚本”属性中
"scripts":
[
//include jQuery here, e.g. if installed with npm
"../node_modules/jquery/dist/jquery.min.js" ,
"assets/scripts/test.js"
]
Note: Don't forget to restart ng serveafter modifying the .angular-cli.jsonor angular.jsonfiles
注意：ng serve修改.angular-cli.json或angular.json文件后不要忘记重新启动
回答by WasiF
I encountered with the similar issue
我遇到了类似的问题
and resolved by a simple change in index.htmlfile
并通过index.html文件中的简单更改解决
<base href="./"> // remove dot (.) and your app will execute scripts
