本文旨在解决在使用 Nginx 配置自定义 400 错误页面时，当用户通过 HTTP 访问 HTTPS 端口时，页面资源无法正确加载的问题。通过配置 Nginx 的 default_server，确保所有进入服务器的请求都能被正确处理，并提供一个统一的错误页面，从而提升用户体验。
当配置 Nginx 时，如果用户尝试通过 HTTP 访问配置了 SSL 的 HTTPS 端口，可能会遇到自定义错误页面显示不正确，资源（如图片、CSS 文件等）无法加载的问题。这是因为 Nginx 在选择处理请求的 server 块时，会根据端口、协议（HTTP 或 HTTPS）以及 server_name 进行匹配。如果找不到完全匹配的 server 块，可能会返回 400 错误。
问题分析
在提供的 Nginx 配置中，server 块只监听了 HTTPS 协议的 789 端口。当用户通过 HTTP 协议访问该端口时，Nginx 无法找到对应的 server 块来处理该请求，因此会返回一个 400 错误。虽然配置了自定义的 400 错误页面，但由于请求的协议是 HTTP，页面中的资源链接（如 src=”../error_pages/assets/images/img12.png”）也是基于 HTTP 的，而此时 Nginx 并没有配置处理 HTTP 请求的 server 块，导致资源无法加载。
解决方案：配置 default_server
为了解决这个问题，建议配置一个 default_server 来处理所有未匹配到其他 server 块的请求。default_server 可以用来处理所有进入服务器的请求，并提供一个统一的错误页面，或者进行其他自定义操作。
以下是一个配置 default_server 的示例：
server { listen 789; # 监听 HTTP 协议的 789 端口 server_name _; # 匹配所有域名 return 400 "Bad Request: Please use HTTPS"; # 返回 400 错误，并提示使用 HTTPS # 或者，也可以重定向到 HTTPS # return 301 https://$host$request_uri; # 或者，返回自定义错误页面 # error_page 400 /400_page.html; # location = /400_page.html { # root /etc/nginx/error_pages; # internal; # }}
配置详解：
listen 789;: 监听 789 端口，但没有指定 ssl 参数，因此处理的是 HTTP 请求。server_name _;: _ 是一个通配符，表示匹配所有域名。这意味着，任何未匹配到其他 server 块的 HTTP 请求都会被这个 server 块处理。return 400 “Bad Request: Please use HTTPS”;: 直接返回一个 400 错误，并提示用户使用 HTTPS 协议。也可以使用 return 301 https://$host$request_uri; 进行重定向，将 HTTP 请求自动跳转到 HTTPS。自定义错误页面 (可选): 可以将 HTTP 请求导向自定义的 400 错误页面。这需要配置 error_page 指令和对应的 location 块，与原始配置中的 HTTPS server 块类似。
注意事项：
确保 default_server 的配置在其他 server 块之前，以便优先匹配。根据实际需求，选择合适的处理方式：直接返回错误、重定向到 HTTPS 或返回自定义错误页面。如果选择返回自定义错误页面，需要确保页面中的资源链接使用绝对路径或相对于 root 指令的相对路径，以避免资源加载问题。例如，可以将CSS和JS文件放到统一的目录下，并在HTML中引用绝对路径，如/assets/css/style.css。同时，需要确保对应的 location 块配置正确。
修改后的 Nginx 配置示例（包含 default_server 和绝对路径资源引用）：
upstream dashboardapp{ server test_server:80;}server { listen 789; server_name _; return 301 https://$host$request_uri;}server { listen 789 ssl; server_name example.com; ssl_certificate /etc/nginx/certs/host.crt; ssl_certificate_key /etc/nginx/certs/host.key; location / { proxy_read_timeout 1800; proxy_connect_timeout 1800; proxy_send_timeout 1800; send_timeout 1800; proxy_hide_header x_destination; proxy_pass http://dashboardapp; } location /error_pages { root /etc/nginx/; } error_page 495 496 497 /400_page.html; location = /400_page.html { root /etc/nginx/error_pages; internal; } error_page 404 /404_page.html; location = /404_page.html { root /etc/nginx/error_pages; internal; } error_page 500 /500_page.html; location = /500_page.html { root /etc/nginx/error_pages; internal; } error_page 502 /502_page.html; location = /502_page.html { root /etc/nginx/error_pages; internal; } error_page 503 /503_page.html; location = /503_page.html { root /etc/nginx/error_pages; internal; } location /assets { root /etc/nginx/error_pages; }}
修改后的错误页面示例（使用绝对路径）：
Oops! Page not found /* 样式保持不变 */var a = document.getElementById('myElementID'); a.href = "http://"+window.location.hostname;@@##@@Oops! Page not found
400
The page you are looking for might have been removed had its name changed or is temporarily unavailable.
Home Page
总结
通过配置 default_server，可以确保 Nginx 能够处理所有进入服务器的请求，即使协议不匹配也能提供友好的错误提示或重定向。同时，在自定义错误页面中，建议使用绝对路径或相对于 root 指令的相对路径来引用资源，以避免资源加载问题。 这将提升用户体验，并确保服务器的安全性。
以上就是解决 Nginx 自定义 400 错误页面 SSL 资源加载问题的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1597542.html
微信扫一扫 
支付宝扫一扫 
