现象1：界面样式错乱

• 打开报告后，界面样式错乱，如下：
  

原因分析

• 出现该现象的原因在于Jenkins中配置的CSP（Content Security Policy）；
• 这是Jenkins的一个安全策略，默认会设置为一个非常严格的权限集，以防止Jenkins用户在workspace、/userContent、archived artifacts中受到恶意HTML/JS文件的攻击；
• 该权限集默认会设置为：

sandbox; default-src 'none'; img-src 'self'; style-src 'self';

• 默认情况下，只允许加载：

Jenkins服务器上托管的CSS文件
Jenkins服务器上托管的图片文件

• 此时以下内容会被禁止：

JavaScript
plugins (object/embed)
HTML中的内联样式表（Inline style sheets），以及引用的外站CSS文件
HTML中的内联图片（Inline image definitions），以及外站引用的图片文件
frames
web fonts
XHR/AJAX
etc.

临时策略

• 进入Manage Jenkins->Script console，输入如下命令并进行执行；

System.setProperty("hudson.model.DirectoryBrowserSupport.CSP", "")

• 如下：
  
• 当输入命令，并运行后，如果为空，则说明配置好了，如下：
  
• 再次进行构建，此时界面样式显示OK了，如下：
  
• 以上操作对之前构建生成的HTML报告有效，且只是临时生效，当重启Jenkins后，Content Security Policy又会恢复为默认值，从而HTML样式又没法展示了。

永久策略

• 安装Groovy插件，如下：
  
• 依次进入项目-配置-Execute Groovy script：
  
• 输入以下内容，保存即可：

System.setProperty("hudson.model.DirectoryBrowserSupport.CSP", "")

现象2：报告路径不存在

• 比如在构建的时候提示报告路径不存在，需要手动创建，错误信息如下：

Jenkins - HTML Publisher Plugin build fails with report directory doesnot exist

原因分析

• 要么远程仓库的项目目录下没有你设置的报告目录；
• 要么你设置的报告目录和仓库中存放的报告路径不一致。

解决策略

• Jenkins上设置好报告存放的目录，如下是项目根目录下的reports目录：
  
• 然后确认仓库中项目的目录下是否有相同的目录：
  
• 如上我的仓库中是report，那么两者是需要一致的，要么是report，要么都是reports；
• 最后确认jenkins容器中的项目目录是否下载或同步成功。可以进入到jenkins容器中查看，命令如下：

sudo docker exec -it jenkins bash

 ls /var/jenkins_home/workspace/test_autoui -ls
# /var/jenkins_home/workspace/：这是jenkins容器上项目的工作空间
# test_autoui：这是我的项目名称，改为自己的即可

• 从上可以看到有report目录，查看里边的报告：
  
• 只有确保了以上几点一致，才能正常显示报告，因为构建的时候控制台的信息已经给出了提示，它是从某个目录拷贝到零一一个目录：
  

现象3：docker和操作系统版本不匹配

• 以上两个现象都解决了，但是仍然不显示报告，报告页面数据直接显示空白；

原因分析

• 查看构建时控制台的输出错误信息：
  
• 即错误信息为：

lib/x86_64-linux-gnu/libc.so.6: version `GLIBC_2.32' not found （required by docker）

• 这个是因为docker版本和操作系统版本不匹配，我的环境是：

docker：最新版本
Ubuntu：22.04

• 经过查阅磁资料，是因为Ubuntu：22.04的问题，需要使用Ubuntu18.04、Ubuntu20.04都可以。

解决策略

• 重装系统，比如使用Ubuntu18.04、Ubuntu20.04。