由于错误的MIME类型而无法加载JavaScript文件(Spring Boot 2，Thymeleaf，Bootstrap) [英] Could not load javascript file because of wrong MIME-Type (Spring Boot 2, Thymeleaf, Bootstrap)
问题描述
我正在编写一个用于教育目的的小型Spring Boot应用程序，并学习如何与百里香和自举一起工作.
I'm writing a small spring boot application for educational purposes and learning how to work with thymeleaf and bootstrap.
我使用百里香叶布局装饰来创建一个好的布局模板，到目前为止，它仍然可以正常工作.在一页上，我想打开一个用于用户输入的弹出窗口，因此我使用了jquery.除了整合bootstrap/webjars外，我还必须编写一个额外的javascript文件并将其放入resources文件夹(resources/static/js/main.js).当我测试应用程序(作为带有嵌入式tomcat的本地jar)时，我可以看到页面，但出现错误，因此main.js没有加载.
I've used thymeleaf layout decorating to create a good layout template and so far it works fine. On one page I want to open a pop-up window for user inputs and so I used jquery. Besides the integration of bootstrap/webjars I had to write an extra javascript file and put it into resources folder (resources/static/js/main.js). When I test the application (as local jar with embedded tomcat) I can see the page but I get an error, so the main.js is not loaded.
错误看起来像:
Das Skript von" http://localhost:8080/static/js/main.js " Geladen，Obwohl sein MIME-Typ("application/json")关键JavaScript gültigerMIME类型专家.
Das Skript von "http://localhost:8080/static/js/main.js" wurde geladen, obwohl sein MIME-Typ ("application/json") kein für JavaScript gültiger MIME-Typ ist.
英语:" http://localhost:8080/static/js/main.js "原为 已加载，即使其mime类型("application/json")无效 javascript mime类型.
Engl.: The script of "http://localhost:8080/static/js/main.js" was loaded, even though its mime type ("application/json") is not a valid javascript mime type.
弹出窗口没有打开，所以我猜Javascript文件不起作用. 集成看起来像
The pop up window is not opening so I guess the javascript-file is not working. The integration looks like
<head>
<script type="text/javascript" src="../../static/js/main.js"></script>
...
</head>
我也尝试过
<head>
<script type="text/javascript" src="../static/js/main.js"></script>
...
</head>
均无效.
有谁知道哪里出了问题或在哪里可以找到更多详细信息?
Neither worked.
Does anybody know what is wrong or where to look for more details?
这是JavaScript文件
Here is the javascript file
$(document).ready(function () {
$('.table .btn_edit').on('click', function (event) {
$('.staff_form #popup').modal();
});
});
Used versions:
Spring boot 2.1.7;
Thymleaf layout dialect 2.4.1;
Bootstrap 4.3.1 --> webjars;
JQuery 3.4.1 --> webjars
资源文件夹的文件夹结构的屏幕截图. resources/templates/user/index.html应该打开javascript文件.
A screenshot of the folder structure of the resources folder. The resources/templates/user/index.html should open the javascript file.
推荐答案
为您的main.js文件尝试此操作，以使百里香素解析上下文:
Try this for your main.js file, so that thymeleaf resolves the context:
<script th:src="@{/js/main.js}"></script>
如果无法立即使用，请将其添加到用于扩展webconfig的任何类中；如果没有该类，则添加该类本身:
And if it doesn't work out of the box, add this to whatever class you use to extend your webconfig, or add the class itself if you don't have one:
@Configuration
@EnableWebMvc
@ComponentScan
public class WebConfig implements WebMvcConfigurer {
private static final String[] CLASSPATH_RESOURCE_LOCATIONS = {
"classpath:/META-INF/resources/", "classpath:/resources/",
"classpath:/static/", "classpath:/public/" };
@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
registry.addResourceHandler("/**")
.addResourceLocations(CLASSPATH_RESOURCE_LOCATIONS);
}
}
这篇关于由于错误的MIME类型而无法加载JavaScript文件(Spring Boot 2，Thymeleaf，Bootstrap)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
