nginx Vue路由器+反向代理导致500错误或空白页

bcs8qyzn  于 2024-01-06  发布在  Nginx
关注(0)|答案(1)|浏览(194)

我的nginx配置如下:

  1. server {
  2. server_name my-website.com;
  3. location / {
  4. proxy_pass http://192.168.1.128:5367;
  5. }
  6. listen 443 ssl; # managed by Certbot
  7. ...
  8. }
  9. server {
  10. if ($host = my-website.com) {
  11. return 301 https://$host$request_uri;
  12. } # managed by Certbot
  13. server_name my-website.com;
  14. listen 80;
  15. return 404; # managed by Certbot
  16. }

字符串
这是一个带有vue路由器的vue应用程序,当我从根访问网站时工作正常,例如my-website.com/。但是,当使用路径访问链接时,例如my-website.com/companies vue路由器似乎会中断并显示空白页面。如何解决这个问题,以便我的网站在通过nginx使用反向代理服务时也能正常工作。
按照vue router页面(https://router.vuejs.org/guide/essentials/history-mode.html)中的建议添加try_files $uri $uri/ /index.html;会导致500错误。

3zwtqj6y

3zwtqj6y1#

问题似乎是try_files $uri $uri/ /index.html;和proxy_pass不允许在同一个块中,所以为了解决这个问题,我需要将它们分开,如下所示:

  1. server {
  2. server_name my-website.com;
  3. location / {
  4. proxy_pass http://192.168.1.128:5367;
  5. proxy_intercept_errors on;
  6. error_page 404 = @fallback;
  7. }
  8. location @fallback {
  9. try_files $uri $uri/ /index.html;
  10. }
  11. listen 443 ssl; # managed by Certbot
  12. ...
  13. }

字符串
在这里,我们说,如果我们有一个404,我们去回退块,导致加载index.html,从而启用路由机制。

展开查看全部

相关问题