本文旨在解决 Nginx 在使用自定义 400 错误页面时，通过 HTTP 访问 HTTPS 端口导致资源（如图片、CSS）加载失败的问题。通过配置 `default_server` 或采用其他高级技巧，确保所有请求都能被正确处理，并提供一致的用户体验，即使在协议不匹配的情况下也能正常显示错误页面。
当你在 Nginx 中配置了自定义错误页面，并且一切在正常情况下运行良好时，可能会遇到一个棘手的问题：当用户尝试通过 HTTP 访问 HTTPS 端口时，自定义的 400 错误页面虽然能显示，但是页面中的资源（例如图片、CSS 样式）却无法加载。这通常是因为浏览器尝试从错误的协议（HTTP）下加载资源，导致请求失败。
问题分析
Nginx 基于端口、协议（HTTP 或 HTTPS）和 server_name 来匹配请求的服务器块。如果没有找到匹配的 default_server，Nginx 可能会返回 400 错误，或者选择第一个最匹配的服务器块。
当用户通过 HTTP 访问配置了 HTTPS 的端口时，由于协议不匹配，Nginx 找不到对应的服务器块来处理该请求。虽然错误页面被显示，但页面中的资源路径仍然是相对于 HTTP 的，因此无法正确加载。
解决方案
解决此问题的关键在于确保 Nginx 能够处理所有进入服务器的请求，即使协议不匹配。以下是几种可行的解决方案：
1. 配置 default_server
配置 default_server 是最推荐的方法。它可以处理所有与任何 server_name 都不匹配的请求。通过配置一个处理 HTTP 请求的 default_server，你可以确保所有通过 HTTP 访问 HTTPS 端口的请求都能被正确处理，并显示自定义的错误页面。
server { listen 789 default_server; # 监听 HTTP 端口 server_name _; # 匹配所有 server_name return 400; # 返回 400 错误 # 或者重定向到 HTTPS # rewrite ^ https://$host$request_uri? permanent; # 配置自定义 400 错误页面 error_page 400 /400_page.html; location = /400_page.html { root /etc/nginx/error_pages; internal; }}
在这个配置中，default_server 监听 789 端口上的所有 HTTP 请求。你可以选择直接返回 400 错误，或者将请求重定向到 HTTPS。同时，配置自定义的 400 错误页面，确保即使在协议错误的情况下也能显示友好的错误提示。
2. 处理同一端口上的 HTTP 和 HTTPS 请求（不推荐）
虽然不推荐，但 Nginx 理论上可以处理同一端口上的 HTTP 和 HTTPS 请求。这需要使用 if 指令来判断协议，并根据协议进行不同的处理。
server { listen 789 ssl; listen 789; # 同时监听 HTTP 和 HTTPS server_name example.com; ssl_certificate /etc/nginx/certs/host.crt; ssl_certificate_key /etc/nginx/certs/host.key; if ($scheme = http) { return 400; # 返回 400 错误 # 或者重定向到 HTTPS # rewrite ^ https://$host$request_uri? permanent; } 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 400 /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; }}
请注意，使用 if 指令在 Nginx 中通常被认为是不好的做法，因为它可能导致性能问题和不可预测的行为。因此，除非你有充分的理由，否则不建议使用这种方法。
3. 修改错误页面中的资源路径
另一种解决方案是修改错误页面中的资源路径，使用绝对路径或协议相对路径。
绝对路径： 使用完整的 URL 地址，例如 https://example.com/error_pages/assets/images/img12.png。协议相对路径： 省略协议部分，例如 //example.com/error_pages/assets/images/img12.png。浏览器会自动根据当前页面的协议选择 HTTP 或 HTTPS。
这种方法可以确保资源能够从正确的协议下加载，但需要修改所有的错误页面，维护成本较高。
总结与注意事项
推荐使用 default_server 来处理所有未匹配的请求，确保 Nginx 能够处理所有进入服务器的流量。避免在同一端口上同时处理 HTTP 和 HTTPS 请求，除非你有充分的理由。如果选择修改错误页面中的资源路径，请确保所有资源都使用正确的路径。定期检查 Nginx 的错误日志，及时发现和解决问题。
通过以上方法，你可以有效地解决 Nginx 自定义 400 错误页面资源加载失败的问题，为用户提供一致且友好的用户体验。
以上就是Nginx 自定义 400 错误页面资源加载失败的解决方案的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1596550.html
微信扫一扫 
支付宝扫一扫 
