首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

404使用nginx和angular刷新时,return不起作用

在使用nginx和angular进行开发时,遇到刷新页面时return不起作用的问题,可能是由于nginx的配置问题导致的。下面是一种可能的解决方案:

  1. 确保nginx的配置文件中已经正确设置了angular应用的根目录和路由规则。可以参考以下示例配置:
代码语言:txt
复制
server {
    listen 80;
    server_name your_domain.com;

    root /path/to/angular_app;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }
}

在上述配置中,root指定了angular应用的根目录,index指定了默认的入口文件为index.htmllocation /部分使用了try_files指令,用于处理路由请求,将所有请求都重定向到index.html,以便让angular应用处理路由。

  1. 确保angular应用的路由配置正确。在angular应用中,可以使用RouterModule来配置路由规则。确保路由规则正确设置,以便匹配到对应的组件。
  2. 确保angular应用的构建文件已经正确部署到nginx的根目录下。在使用ng build命令构建angular应用时,可以通过--output-path参数指定构建文件的输出目录。将构建文件输出到nginx的根目录下,确保nginx可以正确访问到这些文件。
  3. 如果以上步骤都正确配置,但问题仍然存在,可以尝试清除浏览器缓存并重新加载页面,或者尝试在nginx的配置文件中添加一些缓存相关的配置,如下所示:
代码语言:txt
复制
location / {
    ...
    add_header Cache-Control no-cache;
    add_header Pragma no-cache;
    expires 0;
    ...
}

以上配置将禁用浏览器缓存,确保每次刷新页面时都能从服务器获取最新的内容。

关于nginx和angular的更多详细信息和配置,请参考腾讯云的相关产品和文档:

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Angular2学习记录-给后端程序员的经验分享

使用TypeScript作为开发语言,对于JavaC#程序员可以快速上手,还有就是我比较喜欢强类型语言,每个变量各司其职,由其的类型来限定,开发人员也很明确知道变量的作用. googleMicrosoft...queryParamMap.subscribe(),路由参数更新自动通知 3.5组件通信 父->子:子组件使用input装饰器,接受父组件的属性,并且可使用ngOnChanges或则setter监听变化...先分析下问题的原因,我们的单页应用只有一个入口,报404也就是没找到这个入口.看nginx的配置.nginx收到请求后会去root下寻找aust/start下的index.html那么自然找不到,所以直接访问就会...404....这是因为访问主域名后angular的js都已经全部加载了,这个时候跳转是js来控制的,不经过nginx自然不会出现上面的问题.

3.1K20
  • Nginx安装部署之反向代理配置与负载均衡

    Nginx 部署、反向代理配置、负载均衡 最近我们的angular项目部署,我们采用的的是Nginx,下面对Nginx做一个简单的介绍。...为什么选择Nginx 轻:相比于Apache,同样的web服务器占用的资源少 多线程模式:Nginx拥有多个worker进程,处理请求是异步非阻塞的 社区活跃 可以做反向代理 支持7层负载均衡。...#退出nginx Linux(CentOS) 下的 Nginx 下面是我们真正使用的Linux 下 搭建Nginx,演示使用的WM Ware创建的虚拟机。...说明Angular 项目的打包,并部署到虚拟机的Nginx 在本地找了一个angular项目目录下 ng-build,会生一个dist文件夹 键入如下命令:nginx -t nginx -t #查看配置文件路径...中的显示还是我的虚拟机的ip,所以不能当做是否发生反向代理的标注 重新载入Nginx配置 nginx -s reload 刷新刚才的页面,上图:可以发现,已经代理到百度的错误页面上去了。

    84810

    hashhistory路由模式

    routes[path] : routes['404']; } // navigate('/user'); // 导航至用户页面 关于刷新404的问题 为什么history模式下会出现?...根据nginx的配置,当我们在地址栏输入 http://www.xxx.com ,这时会打开我们 dist 目录下的 index.html 文件,然后我们再跳转路由进入到 http://www.xxx.com.../login 关键在这里,当我们在 http://‍website.com/login 页执行刷新操作,会向真正的服务器发送请求资源,nginx location 是没有相关配置的,所以就会出现 404...hash 模式:只将 hash 前面的部分当作地址 history 模式:会将地址栏中的地址全部看作请求地址 hash模式的优缺 兼容低版本浏览器,Angular1.xVue默认使用的就是hash路由...后来慢慢就出现了单页应用,在第一次访问,就把 html 文件,以及其他静态资源都请求到了客户端。之后的操作,只是利用 js 实现组件的展示隐藏。除非需要刷新数据,才会利用 ajax 去请求。

    19910

    Angular路由实现原理

    页面发送请求, hash 部分不会被发送。hash 值的改变,会记录在浏览器的历史记录,可使用浏览器的“后退”,“前进”触发页面跳转。可以利用 hashchange 事件来监听 hash 的变化。...监听hashchange事件,当hash改变触发。并且在页面打开也同样触发一次。<!...劣势:客户端刷新,会把 SPA 的路由误当作 资源请求链接,所以需要配置 web 服务器以处理这些 “路由形式的URL” 以统一放回入口 index.html 文件。...Angular路由实现已经了解了基本原理,那么Angular的路由又是怎么实现的呢。我到github上下载了angular路由实现的源码。...图片后面实际处理路由请求,还会对路由进行合并,路由守卫校验,设置活动路由等操作。这些都是angular提供的进阶的路由能力。基本的路由功能的实现看起来还是非常简单清晰的。

    79610

    vue的两种路由模式

    /'可解决),或者打开显示正常,跳转也正常,但是刷新就报404?...因为打包成静态文件上线后,这个项目就只是一个静态文件,它只是被你的nginx或其他代理服务器给托管起来了,在这个项目里进行F5刷新,还是会等于请求url,如果匹配不到相应的路径就还是会报404 而在开发环境下...,即#号后面不管是什么,刷新都是跳#号前面的原路径 hash路由 配置nginx 配置好nginx后,在nginx根目录新建hashDeom文件夹,里面新建一个index.html,然后即可在浏览器打开...因为前端可以随意输入地址栏跳转,后端如果要匹配到所有的路由的话,可以使用nginx,添加一条location /记录,并且在里面添加:try_files uri uri/ /index.html;这样如果前端地址栏刷新匹配不到...按钮,地址栏会变成localhost:5002/profile是不会发起网络请求的,但是如果当地址栏是localhost:5002/profile,直接F5刷新,就会发起网络请求,然后nginx刚好有一个

    2.1K10

    Angular 项目结合 nginx 上线

    当我们完成了 angular 项目之后,你应该如何上线呢? 也许你会回答: It is not my bussiness. Right?...我们结合 nginx 来讲解一下。 react vue 同理 打包项目 这里使用的是 angular-cli 生成的项目。开发完项目,你只要运行 npm run build 即可。...使用 whereis nginx 进行查找 nginx 安装的位置 在 /etc/nginx/conf.d 文件夹中添加文件新的配置文件,比如 demo.conf,并配置服务端的接口地址前端的入口文件路径等.../404.html; #        location = /404.html { #        } #        error_page 500 502 503 504 /50x.html...总结 我们总结一下整个过程: angular 项目打包 服务器安装 nginx nginx 针对后端服务处理 nginx 针对前端内容处理 将 angular 打包文件上传到服务器指定位置 当然,你还要提前申请好相关的域名

    88710

    Let’s Encrypt免费ssl证书申请

    本文所有的操作均在Ubuntu14.04下进行安装配置 安装 直接安装Let’s Encrypt相对比较复杂费事。.../certbot $ sudo apt-get update $ sudo apt-get install python-certbot-nginx 因为我本机已经有了pythonNginx,所以我的脚本简化为了...配置的内容,基本监听http的配置相似,主要的区别是监听443端口证书的加载,一个例子如下: server { # SSL configuration listen 443 ssl; listen...注意在使用certbot renew的时候,要先关闭nginx才能成功。...3、Nginx配置不起作用,DNS也不起作用 解决方案: (1)、换除Chrome以外的浏览器 (2)、在Chrome中,F12打开控制台,按住刷新按钮,选择‘清空缓存并硬性重新加载’ Chrome

    3.9K30

    在ubuntu系统部署Nginx

    通过软连接,这样就可以直接使用 nginx 执行: $ ln -s /usr/local/nginx/sbin/nginx /usr/bin/nginx 测试是否安装成功: $ nginx -V nginx...-t 如果正常,则热重载nginx: $ nginx -s reload 刷新http://116.xxx.xxx.xx:80/可以看到配置指定站点。...3.4.配置证书https 在/usr/local/nginx/目录下创建sslkey目录,存放SSl证书: 配置https,修改ai.conf(具体配置需要看云服务器要求): server {...,使用默认值即可 gzip_comp_level 6; # 压缩等级【1-9】,等级越高压得越小,越消耗GPU计算资源 gzip_min_length 1k; # 当文件大于等于1k,...做反向代理,无条件压缩所有结果数据 } 重启nginx后,查看网页文件的响应头信息: Content-Encoding:gzip 说明开启了gzip压缩; Transfet-Encoding:chunked

    1.8K20

    Halo 更新,基于Nginx给网址挂上维护界面

    介绍 本站使用Halo进行搭建的博客系统,搭建在Linux系统之中。同时为了更高效利用服务器资源也端口,进行了nginx代理转发机制。 而Halo还在不断的迭代更新之中。...每次系统更新前端访问页面就会报错:502 Bad Gateway。不够优雅和美观。 想着如何在更新维护的时候,告诉访问者当前网址只是在更新。并不是站长跑路了。...只有是出现了 404,500,502,503,504 错误的时候,nginx就会启动update.html页面内容返回。...2.3 刷新Nginx配置,验证效果 我们配置完毕后,就需要通过nginx -s reload 指令 让配置刷新生效。...实例: [root@xxxxx123 conf.d]# nginx -s reload 也可以使用: [root@xxxxx123 conf.d]# service nginx reload 两者都是一样的效果

    50430

    nginx基础知识

    访问认证 nginx访问认证需要用到auth_basic模块,此模块使用的是HTTP Basic Authentication协议来对用户进行访问控制,但此模块并不保证安全性,因为浏览器是以明文方式将用户名密码传给...其他前缀无任何前缀都用于普通字符,而~是区分大小写的匹配,~用于不区分大小写的匹配,还可以使用“!”...(gif|jpg|png|js|css)$ { return "规则D"; } location ~* \.png$ { return "规则E"; } location /img { return "...规则F"; } location / { return "规则G"; 访问根目录/将匹配规则A 访问/static/index.html将匹配规则B,访问/static/files/1.html则匹配规则...C 访问/a.png, 将匹配规则D规则E,但是规则D顺序优先, 规则E不起作用,而/static/c.png则优先匹配到规则B 访问/a.PNG则匹配 规则E,而不会匹配规则D,因为规则E不区分大小写

    74530

    手把手教你搭建一个灰度发布环境

    ——《DevOps实践指南》 对应到软件开中,则是指在发布新的产品特性通过少量的用户试点确认新特性没有问题,确保无误后推广到更大的用户使用群体。...这里选择使用AngularAngular-CLI 来创建代码。创建的项目并不简洁,但是胜在操作简单。我们一次性把两份代码准备好,简化开发侧工作。...ng build --prod 配置Nginx 在上述完成Nginx 的安装操作,我们访问服务器的IP 看到的是Nginx 的页面,现在我们想访问到自己的页面,首先把上面打包得到的A-CanaryDemo...按照此规则配置Nginx 结果如下,此处分别使用11.11.11.1122.22.22.22代表两台服务器的IP地址: # Canary Deployment map $COOKIE_canary $...;     # index index.html;   }   error_page 404 /404.html;     location = /40x.html {   }   error_page

    1.8K12

    【Web技术】743- 手把手教你搭建一个灰度发布环境

    ——《DevOps实践指南》 对应到软件开中,则是指在发布新的产品特性通过少量的用户试点确认新特性没有问题,确保无误后推广到更大的用户使用群体。...这里选择使用AngularAngular-CLI 来创建代码。创建的项目并不简洁,但是胜在操作简单。我们一次性把两份代码准备好,简化开发侧工作。...ng build --prod 配置Nginx 在上述完成Nginx 的安装操作,我们访问服务器的IP 看到的是Nginx 的页面,现在我们想访问到自己的页面,首先把上面打包得到的A-CanaryDemo...按照此规则配置Nginx 结果如下,此处分别使用11.11.11.1122.22.22.22代表两台服务器的IP地址: # Canary Deployment map $COOKIE_canary $...; # index index.html; } error_page 404 /404.html; location = /40x.html { } error_page

    77221

    Nginx设置404错误页面跳转

    fastcgi_intercept_errors的理解 一、Nginx在Linux上设置404错误页面 Linux版本:Centos 7.4 Nginx版本:nginx-1.14.0.tar.gz...nginx安装目录参考: /usr/local/nginx则是我的安装目录 说明:我Linux服务器上已经在tomcat上部署了一个项目,使用Nginx进行的代理, 访问项目不存在的页面,出现的是...Nginx默认的404页面,现在我配置我自己写的404页面进行提示 注意:网上大多数博客写的都只有一种情况,要么就是使用 proxy_intercept_errors on;, 要么就是使用fastcgi_intercept_errors.../404.html; location = /404.html { #使用绝对地址, 跳转服务器/usr/local/nginx/html/404.html...error_page 404 /404.html; location = /404.html { # 使用相对地址, 跳转nginx安装目录下的

    8.7K10

    一个Angular 5教程:一步一步指导实现你的第一个Angular 5应用程序

    每次我们改变我们的代码Angular CLI都会重新编译,如果需要的话重新注入,并要求我们的浏览器在页面打开重新加载页面。...如果不起作用,我们的行动中哪里会派遣?.../nginx/html/ CMD ["nginx", "-g", "daemon off;"] 因此,我们使用基于Node的图像为我们的应用程序使用多阶段构建,然后使用基于Nginx的图像构建服务器包...如果您想采取更先进的措施,请尝试使用Angular 4 Forms:由Toptaler Igor Geshoki进行嵌套输入验证。 理解基础知识 我们为什么要使用Angular?...使用Angular有什么好处? 使用Angular的主要优点是获得一个完全集成的Web框架,该框架提供了自己的内置解决方案,用于构建组件,路由使用远程API。 Angular模块如何工作?

    42.6K10
    领券