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

Question

我正在尝试为 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

Answer 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 内部调用）。

Answer 2

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

一些解决方法是：

1. 删除内部指令

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

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

Answer 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 规则。

Answer 4

这对我有用：

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