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 反向代理 URL替换方案

    关于nginx 反向代理 URL替换方案

    这篇文章主要介绍了nginx 反向代理 URL替换方案,本文给大家代理两种方法一种是直接替换location匹配部分,第二种是使用nginx 的rewrite 模块,本文给大家介绍的非常详细,需要的朋友可以参考下
    2022-03-03
  • 详解常用的nginx rewrite重写规则

    详解常用的nginx rewrite重写规则

    这篇文章主要介绍了详解常用的nginx rewrite重写规则,Nginx的rewrite功能是使用nginx提供的全局变量或自己设置的变量,结合正则表达式和标志位实现url重写以及重定向。感兴趣的可以一起来了解一下
    2019-03-03
  • Windows Server 2016 MySQL数据库安装配置详细安装教程

    Windows Server 2016 MySQL数据库安装配置详细安装教程

    这篇文章主要介绍了Windows Server 2016 MySQL数据库安装配置详细安装教程,需要的朋友可以参考下
    2017-08-08
  • Nginx单IP地址配置多个SSL证书的方法示例

    Nginx单IP地址配置多个SSL证书的方法示例

    这篇文章主要介绍了Nginx单IP地址配置多个SSL证书的方法示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-11-11
  • 在Nginx浏览器中打开目录浏览功能

    在Nginx浏览器中打开目录浏览功能

    这篇文章主要介绍了在Nginx浏览器中打开目录浏览功能,Nginx的目录浏览功能默认情况下被关闭需要手动打开,需要的朋友可以参考下
    2015-07-07
  • 使用Nginx实现301跳转至https的根域名示例代码

    使用Nginx实现301跳转至https的根域名示例代码

    这篇文章主要介绍了使用Nginx实现301跳转至https的根域名,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-04-04
  • Nginx的一些常用配置与技巧总结

    Nginx的一些常用配置与技巧总结

    这篇文章主要给大家总结介绍了关于Nginx的一些常用配置与技巧的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用Nginx具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-05-05
  • 解决方案之关于Nginx高可用方案

    解决方案之关于Nginx高可用方案

    这篇文章主要介绍了解决方案之关于Nginx高可用方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-04-04
  • centos环境下nginx高可用集群的搭建指南

    centos环境下nginx高可用集群的搭建指南

    为了防止Nginx单点故障造成服务器瘫痪,本文介绍了Nginx实现高可用集群构建,下面这篇文章主要给大家介绍了关于centos环境下nginx高可用集群的搭建指南,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-07-07
  • Nginx应用之Location路由反向代理及重写策略示例

    Nginx应用之Location路由反向代理及重写策略示例

    本篇文章主要介绍了Nginx应用之Location路由反向代理及重写策略示例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-02-02

最新评论