若依前后端部署之后验证码不显示

本文涉及的产品
.cn 域名,1个 12个月
简介: 若依前后端部署之后验证码不显示


最近的几天都在搞publiccms的内容,从0到1实现,在花费了大量精力下,终于将一个门户站完完全全的实现了,且还可以自定义扩展内容;欣喜之余,为了避免后期遇到该技术能尽快上手,所以决定趁热打铁,出一份使用publiccms实现普通门户站的入门级教程,各位小伙伴们敬请期待……

👨‍🏫前言

今天在部署若依前后端到服务器上时,发现前端的验证码怎么都出不来,随便上网一查,相关问题以及解决方案数不胜数,遗憾的是,没有一条适合我的。

👩‍💻技术

若依前后端框架:

  • 前端:vue
  • 后端:springbootspringmvcmybatis

服务器:centos7+Nginx配置

📌配置思路

之前有介绍过前后端分离项目如何部署到服务器,忘记的可以点连接去看看,前后端分离项目部署上线详细教程

  1. 将后端springboot项目打包成jar文件,传至服务器指定目录下。
  2. 将前端vue项目打包成dist文件夹,传至服务器指定目录下,我一般习惯和对应的后端jar包放在同一目录下。
  3. 解析域名至服务器下(不会的可以自行百度,很简单)
  4. 配置Nginx文件(验证码没有出来,就是没有正确配置Nginx文件)
  5. 在终端启动后端项目
  6. 在浏览器访问已经配置好的域名

😒错误信息

前端页面可以访问,但是验证码没有加载出来(暂无图),F12打开查看发现请求报错。

🖖解决方法

找了半天,发现是Nginx配置错误,正确配置代码如下所示:

# 这里配置的是80端口监听hbv.51qph.com
    server {
        listen       80;
        server_name  这里写你的域名;
 
    location / {
            root   /www/wwwroot/facilities/dist;
            try_files $uri $uri/ /index.html;
            index  index.html index.htm;
        }
        
          
          location /prod-api/ {
  
            proxy_set_header Host $http_host;
             proxy_set_header X-Real-IP $remote_addr;
             proxy_set_header REMOTE-HOST $remote_addr;
             proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
             proxy_pass http://localhost:7777/;
        }
      
    location /dev-api/ {
  
            proxy_set_header Host $http_host;
             proxy_set_header X-Real-IP $remote_addr;
             proxy_set_header REMOTE-HOST $remote_addr;
             proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
             proxy_pass http://localhost:7777/;
        }
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }

注意:在server_name处写你的域名即可。

好了,今天的分享就到这里,有问题的可以在留言区留言哈。

🙌🙌祝各位点赞的小伙伴们单身的不单身,学习不好的学习好,万事不顺的万事顺!

ame`处写你的域名即可。

好了,今天的分享就到这里,有问题的可以在留言区留言哈。

🙌🙌祝各位点赞的小伙伴们单身的不单身,学习不好的学习好,万事不顺的万事顺!

相关文章
|
3月前
|
JavaScript NoSQL Redis
Vue中实现修改邮箱、手机号等流程的大致过程、验证码由后端的redis生成验证(版本1.0)
这篇文章记录了在Vue中实现修改手机号和邮箱的大致流程,包括使用过滤器部分隐藏展示的手机号和邮箱,以及通过点击触发路由跳转的便捷方式。文章还描述了旧号码和新号码验证的界面实现,其中验证码由后端生成并通过弹窗展示给用户,未来可以接入真正的手机验证码接口。此外,还提供了修改邮箱的页面效果截图,并强调了学习是一个永无止境的过程。
Vue中实现修改邮箱、手机号等流程的大致过程、验证码由后端的redis生成验证(版本1.0)
|
1月前
|
存储 前端开发 Java
验证码案例 —— Kaptcha 插件介绍 后端生成验证码,前端展示并进行session验证(带完整前后端源码)
本文介绍了使用Kaptcha插件在SpringBoot项目中实现验证码的生成和验证,包括后端生成验证码、前端展示以及通过session进行验证码校验的完整前后端代码和配置过程。
95 0
验证码案例 —— Kaptcha 插件介绍 后端生成验证码,前端展示并进行session验证(带完整前后端源码)
|
1月前
|
C#
C# 图形验证码实现登录校验代码
C# 图形验证码实现登录校验代码
76 2
|
2月前
|
前端开发 PHP
ThinkPHP 验证码扩展库的使用,以及多应用模式下,如何自定义验证码校验规则
本文介绍了在ThinkPHP框架中使用验证码扩展库的方法,包括安装验证码扩展库、在页面中使用验证码、自定义验证码配置以及校验验证码的步骤和代码示例。
ThinkPHP 验证码扩展库的使用,以及多应用模式下,如何自定义验证码校验规则
|
6月前
|
前端开发 JavaScript Java
若依部署上线之后验证码不显示的解决方法之一
若依部署上线之后验证码不显示的解决方法之一
|
6月前
|
SQL 前端开发 JavaScript
包含后端的登录与注册页面
包含后端的登录与注册页面
58 0
|
6月前
|
存储 前端开发 Java
①实现基于session的登录流程:发送验证码、登录注册、校验登陆状态
①实现基于session的登录流程:发送验证码、登录注册、校验登陆状态
185 0
KgCaptcha 图形验证码自定义验证行式
图形验证码是一种很常见的行为验证码,其中滑动拼图,用户只需要轻轻滑动滑块填充拼图,即可完成安全验证。通常包括嵌入式、触发式和弹出式三种形式。
KgCaptcha 图形验证码自定义验证行式
KgCaptcha 行为验证码自定义语言/预警信息设置
KgCaptcha 行为验证码自定义语言/预警信息设置
KgCaptcha 行为验证码自定义语言/预警信息设置
|
搜索推荐 前端开发 API
这个验证码合集,从图形到行为验证,你想要的都有-KgCaptcha
凯格行为验证码 - KgCaptcha,采用业界通用的API接口方式,对接轻松简单,即可享受带来的产品服务能力。自定义样式及风控等级,完全个性化的设置,与你的应用完美融合。
这个验证码合集,从图形到行为验证,你想要的都有-KgCaptcha