前端部署nginx刷新后404，解决Nginx刷新页面后404的问题-Toy模板网

这篇具有很好参考价值的文章主要介绍了前端部署nginx刷新后404，解决Nginx刷新页面后404的问题。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

问题描述：

使用Nginx部署后，登录页面刷新一下就出来404，如下图：

nginx 刷新404,Linux记录系列,前端,服务器,运维

刷新以后，页面变成404 Not Found

nginx 刷新404,Linux记录系列,前端,服务器,运维

解决方案：

查看了一下nginx配置，出现问题的配置是这样的：

   server {
        listen       8088;
        server_name  localhost;

        location / {
            root   html/dist;
            index  index.html index.htm;
        }
        location /gateway/ {
             rewrite ^/gateway/(.*) /$1 break;
             proxy_set_header Host $host;
             proxy_set_header X-Real-IP $remote_addr;
             proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
             proxy_set_header X-Forwarded-Proto $scheme;
             proxy_connect_timeout 5;
             proxy_pass http://192.168.0.11:9000/;
    }

修改后的配置是这样的

    server {
        listen       8088;
        server_name  localhost;

        location / {
            root   html/dist;
            index  index.html index.htm;
            try_files $uri $uri/ /index.html;
        }
        location /gateway/ {
             rewrite ^/gateway/(.*) /$1 break;
             proxy_set_header Host $host;
             proxy_set_header X-Real-IP $remote_addr;
             proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
             proxy_set_header X-Forwarded-Proto $scheme;
             proxy_connect_timeout 5;
             proxy_pass http://192.168.0.11:9000/;
    }

添加了try_files $uri $uri/ /index.html，

然后重启一下nginx问题就解决了。

解释：

try_files 表示检查文件是否存在，返回第一个找到的文件，这里设置是index.html内部重定向。

另外，还有一种404报错的问题，可能是nginx访问文件权限问题，

打开nginx.conf，第一行默认是这样的

#user  nobody;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;


events {
    worker_connections  1024;
}

以下省略

可能是你访问的路径，需要root权限，而你启动nginx使用的普通用户，权限不足导致访问不到文件，所以可以这么修改：文章来源地址https://www.toymoban.com/news/detail-544200.html

user  root;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;


events {
    worker_connections  1024;
}

以下省略

到了这里，关于前端部署nginx刷新后404，解决Nginx刷新页面后404的问题的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！