我的编程空间,编程开发者的网络收藏夹
学习永远不晚

前端部署nginx刷新后404,解决Nginx刷新页面后404的问题

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

前端部署nginx刷新后404,解决Nginx刷新页面后404的问题

问题描述:

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

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

解决方案:

查看了一下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使用的普通用户,权限不足导致访问不到文件,所以可以这么修改:

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;}以下省略

来源地址:https://blog.csdn.net/ma726518972/article/details/125400298

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

前端部署nginx刷新后404,解决Nginx刷新页面后404的问题

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

nginx部署react刷新404如何解决

今天小编给大家分享一下nginx部署react刷新404如何解决的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。nginx部署
2023-07-04

apache和nginx下vue页面刷新404的解决方案

这篇文章主要介绍了apache和nginx下vue页面刷新404的解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
2022-12-09

Vue项目部署到IIS后刷新报错404的问题及解决方法

这篇文章主要介绍了Vue项目部署到IIS后,刷新报错404,这里需要用到URL重写工具 --URL Rewrite,需要的话需要自己下载安装,本文通过图文并茂的形式给大家介绍的非常详细,需要的朋友可以参考下
2022-11-13

Vue3页面局部刷新组件的刷新问题怎么解决

开始操作vue3的生命周期和vue2的生命周期是完全不一样的vue2和vue3的区别我这里就简单介绍一下2者的区别Vue2与Vue3最大的区别:Vue2使用选项类型API(OptionsAPI)对比Vue3合成型API(CompositionAPI)旧的选项型API在代码里分割了不同的属性:data,computed属性,methods,等等。新的合成型API能让我们用方法(function)来分割,相比于旧的API使用属性来分组,这样代码会更加简便和整洁。vue2exportdefault{p
2023-05-17

Vueiframe更改src后页面未刷新问题解决方法

这篇文章主要介绍了Vueiframe更改src后页面未刷新问题解决,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2023-05-18

编程热搜

目录