nginx配置请求转发不生效的实现
更新时间：2025年02月11日 10:53:56 作者：代码轨迹
本文主要介绍了nginx配置请求转发不生效的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
Bug Description
将vue打包部署时，修改了nginx.conf，在nginx.conf中配置了请求转发，但是请求转发不生效，请求返回状态码404。
nginx配置如下：
location ~ ^/api(/|$) {
proxy_next_upstream http_500 http_502 http_503 http_504 error timeout invalid_header;
proxy_set_header Host $host;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_pass http://localhost:8081; #代理的ip
expires 24;
}
Reproduction Steps
1.编写vue项目，使用npm run build打包，将打包后的文件夹dist放到nginx的html目录下。
2.修改nginx.conf，配置请求转发。
3.启动nginx服务。
Reason
在本地开发环境，为了解决跨域问题，修改了vue.config.js：
devServer: {
proxy: {
'/api': {
target: 'http://localhost:8081',
changeOrigin: true,
pathRewrite: { '^/api': '' },
ws: true,
secure: false
}
}
}
此处做了路由改写，实际后端访问地址为http://localhost:8081/，而nginx配置的代理地址为http://localhost:8081/api，导致请求定向错误。
Solution
将nginx.conf进行路由改写：
location ~ ^/api(/|$) {
proxy_next_upstream http_500 http_502 http_503 http_504 error timeout invalid_header;
proxy_set_header Host $host;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_pass http://localhost:8081; #代理的ip
# 将 /api 替换为 /
rewrite ^/api(.*)$ $1 break;
expires 24;
}
正常转发，请求返回状态码200。
到此这篇关于nginx配置请求转发不生效的实现的文章就介绍到这了,更多相关nginx 请求转发不生效内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了隐藏Nginx版本号的最简单的方法,对外隐藏Nginx版本号有利于维护服务器安全,需要的朋友可以参考下2015-04-04
本文主要介绍了Nginx的配置文件结构和HTTP配置指令,涵盖了从请求处理到安全、日志、负载均衡、缓存等各个方面,具有一定的参考价值,感兴趣的可以了解一下2024-12-12
mac安装nginx且配置vue/springboot项目过程(本地/服务器)
文章涵盖Mac和Linux安装Nginx的步骤,包括配置路径、自启动、端口修改、前端部署及权限设置,解决常见问题以确保服务正常运行2025-07-07
这篇文章主要介绍了nginx通过location配置代理的原理和实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2025-03-03
这篇文章主要介绍了nginx+php-fpm实现大文件下载排坑的过程,文中通过代码实例相结合的形式给大家介绍的非常详细，具有一定得参考借鉴价值，需要的朋友参考下吧2018-08-08
本文详细介绍了Nginx的配置文件和虚拟主机搭建,包括全局配置、I/O事件配置、HTTP与location配置,以及虚拟主机的三种搭建方式,通过实例操作,帮助读者理解和应用Nginx,实现高性能和安全的Web服务部署,感兴趣的朋友跟随小编一起看看吧2025-12-12
Docker是一个开源的容器化平台,用于轻松地打包、部署和运行应用程序,而Nginx是一个高性能的开源反向代理服务器,也是一个流行的Web服务器,这篇文章主要给大家介绍了关于使用Docker主机启动Nginx服务器的完整步骤,需要的朋友可以参考下2024-07-07
这篇文章主要介绍了nginx代理配置完之后,nginx配置proxy_pass，需要注意转发的路径配置,需要的朋友可以参考下2015-02-02
文章介绍了如何配置Jupyter Notebook和Nginx以支持WebSocket协议,首先,检查并生成Jupyter配置文件,设置密码,然后,在Nginx配置文件中为Jupyter配置代理,确保支持WebSocket2026-03-03
这篇文章主要介绍了nginx屏蔽指定接口(URL)的操作方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-05-05
最新评论