带有css和图像文件的nginx自定义错误页面502答案

【问题标题】：nginx custom error page 502 with css and image files带有css和图像文件的nginx自定义错误页面502
【发布时间】：2021-07-13 15:19:55
【问题描述】：

我正在尝试为 503 添加自定义错误页面。我将这些行添加到 nginx.conf 文件中的服务器 conf：

error_page 500 502 503 504 /50x.html;
location = /50x.html {
    root  /home/username/sites/myProject/current/errorPages;
    internal;
}

当 uwsgi 关闭时它会显示自定义页面，但是这不会显示任何图像。我尝试了许多我能想到的不同配置，但没有运气。如何显示图像文件并为自定义错误页面启用 css？

我将自定义错误页面放入/home/username/sites/myProject/current/errorPages 文件结构为：

errorPages/50x.html
errorPages/50x_files/50x.css
errorPages/50x_files/50x.js
errorPages/50x_files/image.png

【问题讨论】：

如何在50x.html 中引用此 CSS/图像？

标签： html css nginx uwsgi

【解决方案1】：

我刚刚遇到了同样的问题，并且起作用的是像这样设置 nginx conf：

error_page 500 502 503 504 /50x.html;
location = /50x.html {
  root  /home/username/sites/myProject/current/errorPages;
}
location = /image.png {
  root /home/username/sites/myProject/current/errorPages/50x_files;
}

然后将图像简单地引用为 src="image.png"。这同样适用于您的 css 和 js！

编辑：我找到了一种使它适用于一堆文件的方法：

error_page 500 502 503 504 /errorPages/50x.html;
location /errorPages/ {
  root  /home/username/sites/myProject/current/;
}

这样，errorPages 文件夹中的所有文件都将可用（例如 src="/errorPages/image.png"），因为 nginx 会尝试匹配所有“/errorPages/...”。有必要删除“位置”之后的“=”（因为它不再完全匹配）和“内部；”在其中（因为其他资源将从 html 调用，而不是由 nginx 内部调用）。

【讨论】：

在您的第二种方法中，location /errorPages/50x.html { 应该是 location /errorPages {。否则在errorPages文件夹下找不到图片。
@Ikrom 谢谢！我刚刚检查了我的conf，确实应该是/errorPages/

【解决方案2】：

您的图像/css 未显示/加载的原因是因为您使用的是internal 指令。 internal 指令指定给定位置只能用于内部请求，不能从外部使用或访问（即http://mysite/errorPages/500.html）。因此，这些文件会依次出现 404 错误。

一些解决方法是：

删除内部指令

error_page 500 502 503 504 /50x.html;
location = /50x.html {
    root  /home/username/sites/myProject/current/errorPages;
}

为您的错误页面使用css inline styles。但是，这不适用于您的图片或链接到您页面的其他文件。
将 css 和图像文件放在 errorPages 文件夹之外，并在您的 html 代码中使用相对路径引用它们，从您网站的根目录开始。

【讨论】：

【解决方案3】：

我认为最好的方法是做以下事情：

使用inline CSS
将您的图像转换为Base64

完成后，可以将生成的Base64字符串嵌入到background-image CSS规则中，如下：

background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEADI.....==)

您也可以使用带有<img> 标签的字符串，只需将其传递给src 属性，如下所示：

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEADI.....==" />

这样可以保持internal nginx 规则。

【讨论】：

CSP 标头可能禁止内联样式。

【解决方案4】：

这对我有用：

error_page 500 502 503 504 = @errorz;
location @errorz{
        root /home/username/sites/myProject/current/errorPages;
        try_files $uri /50x.html = 502 503;
}

【讨论】：