基于Thymeleaf的HTML页面添加meta标签引发白标错误求助

当然允许在Thymeleaf渲染的HTML页面标签内添加meta标签！你遇到的Whitelabel Error Page错误，大概率不是meta标签本身导致的，而是一些容易忽略的细节问题，下面给你梳理几个排查方向：

• 检查标签闭合规范
  Thymeleaf对模板语法的严谨性有要求，如果你项目里的Thymeleaf模板模式配置的是XML或XHTML，所有标签必须严格闭合。你添加的meta标签是HTML5的简写形式（无闭合斜杠），可能会触发模板解析错误。试试把meta标签改成自闭合形式：

  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  

  如果你的模板模式是HTML5或LEGACYHTML5，这种简写是允许的，但还是建议统一闭合规范避免意外问题。

• 排查模板片段引用问题
  你代码里用了th:replace="fragments/header :: header-css"引用外部片段，要确认这个header-css片段本身没有语法错误，比如是否有未闭合的标签、无效的Thymeleaf表达式，或者片段里的内容和你新加的meta标签有没有冲突（比如重复定义了charset或viewport）。

• 查看服务器端错误日志
  Whitelabel Error Page只是Spring Boot的默认错误页，真正的错误原因藏在控制台日志里。去看看你的应用日志，找有没有TemplateInputException这类模板相关的异常，里面会明确指出解析失败的具体位置和原因，这是最快定位问题的方法。

• 验证模板模式配置
  检查你的application.properties或application.yml里的Thymeleaf模板模式配置：

  spring.thymeleaf.mode=HTML5
  

  如果配置的是XML，那必须严格遵循XML语法，所有标签都要闭合；如果是HTML5，则支持HTML5的宽松语法。

给你一个调整后的示例代码，确保标签规范：

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Data Services Platform Support</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <div th:replace="fragments/header :: header-css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-smart-table/2.1.8/smart-table.min.js"></script>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans" />
    <link rel="stylesheet" type="text/css" href="webjars/bootstrap/3.3.7/css/bootstrap.min.css" />
    <link rel="stylesheet" th:href="@{/css/main.css}" href="../../css/main.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
    ...
</body>
</html>

先按上面的方向排查，尤其是查看日志，应该能很快找到问题所在。

内容的提问来源于stack exchange，提问作者Mike