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

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

最近的几天都在搞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`处写你的域名即可。

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

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

目录
相关文章
|
前端开发 JavaScript Java
若依前后端部署之后验证码不显示
若依前后端部署之后验证码不显示
|
负载均衡 Ubuntu 应用服务中间件
|
JavaScript 前端开发
若依框架文档开发手册----开发中常用功能模块(中)
若依框架文档开发手册----开发中常用功能模块
4924 0
|
资源调度 关系型数据库 MySQL
若依框架部署从零开始2023版(前后端分离)
电脑最近重装了一次系统,目前什么都没有安装,记录一下从零开始部署前后端分离版本的若依框架系统先去官网把若依源码拉下来。
2143 0
|
前端开发 JavaScript 关系型数据库
若依框架------后台路由数据是如何转换为前端路由信息的
若依框架------后台路由数据是如何转换为前端路由信息的
2455 0
|
缓存 Java 应用服务中间件
java语言后台管理若依框架-登录提示404-接口异常-系统接口404异常如何处理-登录验证码不显示prod-api/captchaImage 404 (Not Found) 如何处理-解决方案优雅草卓伊凡
java语言后台管理若依框架-登录提示404-接口异常-系统接口404异常如何处理-登录验证码不显示prod-api/captchaImage 404 (Not Found) 如何处理-解决方案优雅草卓伊凡
5009 5
|
监控 NoSQL Java
若依RuoYi项目环境搭建教程(RuoYi-Vue + RuoYi-Vue3版本)
若依(RuoYi)是一款基于Spring Boot和Vue.js的开源Java快速开发脚手架,支持OAuth2、JWT鉴权,集成多种安全框架和持久化框架。它提供了系统管理、监控管理、任务调度、代码生成等常用功能模块,适合中小型公司快速搭建Web应用。本文主要介绍若依框架的特点、版本发展、优缺点及项目部署步骤,帮助开发者快速上手并部署若依项目。
21576 3
若依RuoYi项目环境搭建教程(RuoYi-Vue + RuoYi-Vue3版本)
|
SQL JSON 前端开发
若依RuoYi脚手架二次开发教程(二次开发必学技能)
本次我们将通过一个菜品管理模块开发的案例,来演示拿到若依框架后,如何在若依管理系统上进行二次开发,升级改造为自己的管理系统。适合以若依作为项目脚手架的公司开发人员、毕业设计的学生及开源项目学习者。
10339 1
若依RuoYi脚手架二次开发教程(二次开发必学技能)
|
SQL 缓存 分布式计算
2025年5大主流报表工具,哪款最适合你?
在中国企业的信息化建设中,报表是数据展示和业务决策的重要工具。然而,由于中国企业的特殊业务需求(如多层表头、复杂交叉报表、多源分片、动态扩展等),传统的国际报表工具往往难以满足需求。催生了专门针对中国式复杂报表的解决方案。下面带着大家一起看看2025年5大主流报表工具。
|
前端开发 NoSQL Java
【Java若依框架】RuoYi-Vue的前端和后端配置步骤和启动步骤
本文介绍了如何配置和启动基于Java的若依(RuoYi)项目,涵盖后端和前端的详细步骤。首先,准备Redis、MySQL以及IDE(如Idea和VS)。接着,通过GitHub获取代码并导入到IDE中,执行必要的SQL文件和配置数据库密码。然后,启动Redis并进行相关配置。最后,按照前端配置步骤克隆前端代码库,打开终端执行命令完成前端配置。整个过程详细记录了每一步的操作,帮助开发者顺利部署若依项目。 如果你觉得有帮助,请点赞、关注和收藏,这将是我持续分享的动力!
8762 4