Windows下Nginx配置HTTPS转发SpringBoot和Vue的详细步骤

 更新时间:2026年08月30日 10:26:30   作者:Maggieq8324  
还在为前后端分离部署时Nginx配置发愁吗?本文手把手教你用Nginx代理SpringBoot和Vue,并解决自制HTTPS证书导致的浏览器拦截问题,让你轻松实现安全访问

环境

  • Windows 10
  • SpringBoot 1.5.20
  • Vue 2.5.2
  • Nginx 1.12.2
  • OpenSSL-Win64

下载

Nginx官网下载:http://nginx.org/en/download.html

解压如下所示:

运行

  • cmd切换到nginx目录,执行命令:
start nginx
  • 浏览器地址栏输入网址 http://localhost,出现以下页面说明启动成功

前后端分离配置

  • nginx.conf配置

我们可以修改nginx的配置文件nginx.conf 达到访问nginx代理服务器时跳转到指定服务器的目的,即通过proxy_pass配置请求转发地址,这里SpringBoot使用的是内置的tomcatvue部署在了tomcat里,

如下代码所示,后台的端口为31096,前端的端口为8080,在这里只配置监听80端口,因为前端访问路径都带了项目名称,如果是前端路径则转发到前端工程,其余转发到后端;

当然,也可以配置两个端口分别监听前后端的端口来实现前后端分离部署。

server {
        listen       80;
        server_name  localhost;

        location / {
            # root   html;
            # index  index.html index.htm;
			proxy_pass https://127.0.0.1:31096;
        }
		
		# app为前端项目名称,带app的访问路径都是访问前端,故此将请求转到前端工程
		location ^~ /app/ {
			proxy_pass http://127.0.0.1:8080;
			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;
		}

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
  • 重启nginx
nginx -s reload
  • 访问http://localhost/项目名,这样就简单的实现了一个前后端分离部署

配置https

  • 下载OpenSSL

官网下载:http://slproweb.com/products/Win32OpenSSL.html

  • 配置环境变量

  • 生成https证书
openssl genrsa -des3 -out server.key 1024

  • 创建 csr 证书
openssl req -new -key server.key -out server.csr

  • 删除密码

复制server.key并重命名server.key.org

openssl rsa -in server.key.org -out server.key

  • 生成crt证书
openssl x509 -req -days 365 -in server.csr -signkey server.key -out server.crt

结果如下:

  • 修改nginx下的nginx.conf配置文件
server {
		listen 8443;      # 站点监听端口
		server_name 127.0.0.1:8443; # 配置的https的域名
		ssl on;		# 开启ssl
		root html;
		index index.html index.htm;
		ssl_certificate      C://Users//Coisini//ssl//server.crt;  # 证书的crt文件所在目录
		ssl_certificate_key  C://Users//Coisini//ssl//server.key;  # 证书key文件所在目录
		ssl_session_timeout 5m;
		ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
		ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
		ssl_prefer_server_ciphers on;
		
		location / {
			proxy_pass https://127.0.0.1:31096;
		}
		
		location ^~ /app/ {
			#root html;
			#index index.html index.htm;
			proxy_pass http://127.0.0.1:8080;
		}
		
		#error_page   500 502 503 504  /50x.html;
        #location = /50x.html {
            #root   html;
        #}
    }
  • 效果如下所示:

总结

程序发布时前后端用的都是httpsspringboot用内置的tomcatvue部署在tomcat里,因为ssl证书都是自制的,浏览器并不认可,会出现连接不是私密连接的验证,这样就导致了一个问题,访问前端登录页验证一次私密连接,但登录页上的后台验证码却刷不出来,浏览器对后端的连接也进行了拦截,浏览器不信任证书可以把证书导入浏览器来解决,但因为太麻烦用nginx做了个转发解决了这无厘头问题

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Nginx从搭建到配置支持HTTPS的方法

    Nginx从搭建到配置支持HTTPS的方法

    这篇文章主要介绍了Nginx从搭建到配置支持HTTPS的方法,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-07-07
  • nginx请求时找路径问题解决

    nginx请求时找路径问题解决

    当你安装了nginx的时候,为nginx配置了如下的location,想要去访问路径下面的内容,可是总是出现404,找不到文件,这是什么原因呢,今天我们就来解决这个问题,感兴趣的朋友一起看看吧
    2023-10-10
  • 利用Nginx反向代理功能自建CDN加速页面服务

    利用Nginx反向代理功能自建CDN加速页面服务

    这篇文章主要介绍了利用Nginx反向代理功能自建CDN加速页面服务方法,需要的朋友可以参考下
    2024-03-03
  • Keepalived实现Nginx负载均衡高可用的示例代码

    Keepalived实现Nginx负载均衡高可用的示例代码

    这篇文章主要介绍了Keepalived实现Nginx负载均衡高可用的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-04-04
  • zabbix自定义监控nginx状态实现过程

    zabbix自定义监控nginx状态实现过程

    这篇文章主要为大家介绍了zabbix如何自定义监控nginx状态的实现过程,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步
    2021-10-10
  • Nginx配置SSL证书监听443端口

    Nginx配置SSL证书监听443端口

    这篇文章主要为大家详细介绍了Nginx配置SSL证书监听443端口的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-02-02
  • 针对OpenSSL安全漏洞调整Nginx服务器的方法

    针对OpenSSL安全漏洞调整Nginx服务器的方法

    这篇文章主要介绍了针对OpenSSL漏洞调整Nginx服务器的方法,2014年爆出的SSL安全漏洞震惊了全世界,需要的朋友可以参考下
    2015-06-06
  • 淘宝Web服务器Tengine在CentOS下的安装教程

    淘宝Web服务器Tengine在CentOS下的安装教程

    这篇文章主要介绍了淘宝Web服务器Tengine在CentOS下的安装教程,本文同时介绍了Tengine是什么,需要的朋友可以参考下
    2014-07-07
  • 前端nginx部署详细图文教程

    前端nginx部署详细图文教程

    在前端开发过程中经常是需要把前端静态资源放到服务器中看效果,这时经常用到nginx来配置,下面这篇文章主要给大家介绍了关于前端nginx部署的相关资料,需要的朋友可以参考下
    2024-03-03
  • Nginx如何实现对城市以及指定IP的访问限制

    Nginx如何实现对城市以及指定IP的访问限制

    本文介绍了如何使用Nginx代理MySQL连接并限制可访问IP,以及如何通过第三方模块ngx_http_geoip2_module实现基于国家/城市访问限制
    2025-03-03

最新评论