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

本文涉及的产品
.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`处写你的域名即可。

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

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

目录
相关文章
|
4月前
|
前端开发 JavaScript Java
若依前后端部署之后验证码不显示
若依前后端部署之后验证码不显示
|
1月前
|
JavaScript NoSQL Redis
Vue中实现修改邮箱、手机号等流程的大致过程、验证码由后端的redis生成验证(版本1.0)
这篇文章记录了在Vue中实现修改手机号和邮箱的大致流程,包括使用过滤器部分隐藏展示的手机号和邮箱,以及通过点击触发路由跳转的便捷方式。文章还描述了旧号码和新号码验证的界面实现,其中验证码由后端生成并通过弹窗展示给用户,未来可以接入真正的手机验证码接口。此外,还提供了修改邮箱的页面效果截图,并强调了学习是一个永无止境的过程。
Vue中实现修改邮箱、手机号等流程的大致过程、验证码由后端的redis生成验证(版本1.0)
|
3月前
|
前端开发 JavaScript
阿里云验证码2.0 验证时报错 前端页面获取的验证参数有问题,动态JS加载失败,请问怎么解决啊?急,急,急。
用户反馈校验时遇到错误,日志显示验证码参数获取异常。采用无痕验证,失败后,返回`{captchaResult:false,bizResult:false}`,未触发滑块二次验证。
|
4月前
|
前端开发 JavaScript Java
若依部署上线之后验证码不显示的解决方法之一
若依部署上线之后验证码不显示的解决方法之一
|
4月前
|
SQL 前端开发 JavaScript
包含后端的登录与注册页面
包含后端的登录与注册页面
52 0
|
存储 前端开发 NoSQL
TienChin 验证码响应结果分析&验证码生成接口分析
首先从前端开始进行分析,进入到登录页面,打开开发者工具(f12),找到 network,f5 刷新一下页面,然后,筛选一下,筛选内容为 Fetch/XHR:
83 0
TienChin 验证码响应结果分析&验证码生成接口分析
|
JavaScript API 容器
手机短信验证码登录功能的开发实录(机器识别码、短信限流、错误提示、发送验证码倒计时60秒)
手机短信验证码登录功能的开发实录(机器识别码、短信限流、错误提示、发送验证码倒计时60秒)
269 1
|
安全 前端开发 JavaScript
Web前端登录拼图验证功能,看你是人还是机器
相信大家经常在各种网站上登录、注册、下发短信、活动等会看到,系统会弹出来一个滑块验证,让你把一个滑块滑到指定空缺的位置(还有其他种形式,比如按顺序点击文字或图案等等),系统会校验,校验正确则登录成功,否则即使账号密码输入正确也无法登录。这样做主要是为了系统更安全,减少被机器模拟登录行为破坏网站。今天就来白嫖一下腾讯云提供的图片验证功能。
283 0
Web前端登录拼图验证功能,看你是人还是机器
|
JavaScript 前端开发 数据安全/隐私保护
前端案例:简易登录表单的制作,包括用户名、密码、随机验证码(代码完整,复制即用)
前端案例:简易登录表单的制作,包括用户名、密码、随机验证码(代码完整,复制即用)
507 0
前端案例:简易登录表单的制作,包括用户名、密码、随机验证码(代码完整,复制即用)