前端启动后，登录页面的验证码不显示？

[zuihou]

版本信息：
源码版本：2.5.0
MySQL： 5.7.9
Nacos：1.2.1
redis: 4.x

问题描述：
前端启动后，登录页面的验证码不显示？

支持一下:

如果该issue帮助了你, 麻烦给项目点个star, 并给当前issue回复一下 “👍” 或者 “已解决”.

[zuihou]

一. 后台是lamp-cloud项目时，请参考本条:

• 确保nacos、GatewayServerApplication、OauthServerApplication 启动成功
• 谷歌浏览器访问： http://127.0.0.1:8760/api/oauth/anno/captcha?key=123 ， 若能显示验证码，说明后端代码没问题，需要检查前端配置

1. npm run dev 启动的， 检查 .env.development

 http://127.0.0.1:8760 表示lamp-gateway-server服务的访问地址，非本机访问，请配置内网ip
VUE_APP_DEV_REQUEST_DOMAIN_PREFIX = 'http://127.0.0.1:8760'


# 请求域名前缀， 该变量仅仅生产环境需要设置   （请勿改动）
VUE_APP_PROD_REQUEST_DOMAIN_PREFIX = ''
# URI 前缀，用于根据URI前缀进行代理  （请勿改动）
VUE_APP_BASE_API = '/api'

2. npm run dev启动的， 检查 vue.config.js

proxy: {
       [proxyUrl]: {
        target: targetUrl,
        changeOrigin: true,
        pathRewrite: {
          ['^' + proxyUrl]: proxyUrl
        }
      }
    }

3. npm run build:prod 打包成静态文件后，通过nginx 代理访问的， 检查 .env.production

# 请求域名前缀, 将该参数配置成 nginx 的IP + nginx 的端口
VUE_APP_PROD_REQUEST_DOMAIN_PREFIX = 'http://tangyh.top:10000'

4. . npm run build:prod 打包成静态文件后，通过nginx 代理访问的，检查nginx配置文件

server {
        listen       10000;
        server_name  localhost;
        underscores_in_headers on;

       # 将 npm run build:prod 打包后的 lamp-web 文件夹，放到 /data/projects/ 目录下 
        location /lamp-web {
            proxy_set_header   Host $host:$server_port;
            proxy_redirect off;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_connect_timeout 60;
            proxy_read_timeout 600;
            proxy_send_timeout 600;
            root /data/projects/;
            index index.html;
        }

        # 切记， 在docker启动的nginx 必须将该文件中所有的 localhost 改成服务器的 内网ip （不能为 127.0.0.1）
       # http://localhost:8760/api 改成 网关服务的 ip + port
        location /api {
            proxy_set_header   Host $host:$server_port;
            proxy_redirect off;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_connect_timeout 60;
            proxy_read_timeout 600;
            proxy_send_timeout 600;
            proxy_pass http://localhost:8760/api;
        }
}

5. 谷歌浏览器访问： http://127.0.0.1:8760/api/oauth/anno/captcha?key=123 ， 若不能显示验证码，说明后端代码有问题，debug OauthController#captcha

public class OauthController {
    @ApiOperation(value = "验证码", notes = "验证码")
    @GetMapping(value = "/captcha", produces = "image/png")
    public void captcha(@RequestParam(value = "key") String key, HttpServletResponse response) throws IOException {
        this.validateCodeService.create(key, response);
    }
}

6. 若断点无法进入该方法，浏览器访问：http://127.0.0.1:8773/anno/captcha?key=123 ， 若该接口能显示验证码图片，但上一步的接口无法显示：

• 可能的问题1： 说明gateway、oauth服务没有成功注册到nacos，请认真阅读看云文档快速开始的所有子章节： https://www.kancloud.cn/zuihou/zuihou-admin-cloud
• 可能的问题2：你使用了公网上部署的nacos 、或者部署的gateway服务和oauth服务的服务器网络不通。 解决方案： nacos、gateway、oauth 等服务要使用内网IP，且服务器之间内网互通，防火墙关闭。

[XiongLongHui]

麻烦问一下，没有在线的接口地址可以请求吗，必须要启动后端项目吗

[zuihou]

麻烦问一下，没有在线的接口地址可以请求吗，必须要启动后端项目吗

http://tangyh.top:10000/api/gate/doc.html

[zuihou]

二. 后台是lamp-boot项目时，请参考本条

• 确保AuthorityServerApplication 启动成功
• 谷歌浏览器访问： http://127.0.0.1:8760/anno/captcha?key=123 ， 若能显示验证码，说明后端代码没问题，需要检查前端配置

1. 前端项目以 npm run dev 启动的， 检查 .env.development

VUE_APP_DEV_REQUEST_DOMAIN_PREFIX = 'http://127.0.0.1:8760'

VUE_APP_PROD_REQUEST_DOMAIN_PREFIX = ''

VUE_APP_BASE_API = '/api'

2. npm run dev启动的， 检查 vue.config.js

proxy: {
       [proxyUrl]: {
        target: targetUrl,
        changeOrigin: true,
        pathRewrite: {
          ['^/api/oauth']: '/',
          ['^/api/authority']: '/',
          ['^/api/file']: '/',
          ['^/api/msg']: '/',
          ['^/api/gate']: '/',
          ['^/api/tenant']: '/',
        }
      }
    }

3. npm run build:prod 打包成静态文件后，通过nginx 代理访问的， 检查 .env.production

# 请求域名前缀, 将该参数配置成 nginx 的IP + nginx 的端口
VUE_APP_PROD_REQUEST_DOMAIN_PREFIX = 'http://tangyh.top:10000'

4. . npm run build:prod 打包成静态文件后，通过nginx 代理访问的，检查nginx配置文件

server {
        listen       10000;
        server_name  localhost;
        underscores_in_headers on;

       # 将 npm run build:prod 打包后的 lamp-web 文件夹，放到 /data/projects/ 目录下 
        location /lamp-web {
            proxy_set_header   Host $host:$server_port;
            proxy_redirect off;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_connect_timeout 60;
            proxy_read_timeout 600;
            proxy_send_timeout 600;
            root /data/projects/;
            index index.html;
        }

           location /api/authority/ {
            proxy_pass http://192.168.1.34:8760/;
        }
        location /api/oauth/ {
            proxy_pass http://192.168.1.34:8760/;
        }
        location /api/file/ {
            proxy_pass http://192.168.1.34:8760/;
        }
        location /api/msg/ {
            proxy_pass http://192.168.1.34:8760/;
        }
        location /api/gate/ {
            proxy_pass http://localhost:8760/;
        }
        location /api/tenant/ {
            proxy_pass http://localhost:8760/;
        }

}

• 谷歌浏览器访问： http://127.0.0.1:8760/anno/captcha?key=123 ， 若不能显示验证码，说明后端代码有问题，debug OauthController#captcha

public class OauthController {
    @ApiOperation(value = "验证码", notes = "验证码")
    @GetMapping(value = "/captcha", produces = "image/png")
    public void captcha(@RequestParam(value = "key") String key, HttpServletResponse response) throws IOException {
        this.validateCodeService.create(key, response);
    }
}

[Johnson112358]

debug.txt
springboot版获取验证码，后端在运行到这一句时报错，

cacheOps.set(cacheKey, StringUtils.lowerCase(captcha.text()));

[Johnson112358]

同样的代码，线上部署是可以的，就我本地不行，配置文件我就改了端口号

[zuihou]

同样的代码，线上部署是可以的，就我本地不行，配置文件我就改了端口号

jdk 不要用ide自带的，用 jdk 8 或者jdk11

[Johnson112358]

------------------&nbsp;原始邮件&nbsp;------------------ 发件人: "zuihou/lamp-cloud" ***@***.***&gt;; 发送时间:&nbsp;2022年3月10日(星期四) 下午4:06 ***@***.***&gt;; ***@***.******@***.***&gt;; 主题:&nbsp;Re: [zuihou/lamp-cloud] 前端启动后，登录页面的验证码不显示？ (Discussion #53) 同样的代码，线上部署是可以的，就我本地不行，配置文件我就改了端口号 jdk 不要用ide自带的，用 jdk 8 或者jdk11 — Reply to this email directly, view it on GitHub, or unsubscribe. Triage notifications on the go with GitHub Mobile for iOS or Android. You are receiving this because you commented.Message ID: ***@***.***&gt; 我修改为了jdk1.8.25，但是network-util\lamp-core\src\main\java\com\tangyh\basic\utils\TreeUtil.java报错如下 F:\202202_DYPSGW\network-util\lamp-core\src\main\java\com\tangyh\basic\utils\TreeUtil.java:52:90 java: 对于collect(java.util.stream.Collector<java.lang.Object,capture#1, 共 ?,java.util.List<java.lang.Object&gt;&gt;), 找不到合适的方法 &nbsp; &nbsp; 方法 java.util.stream.Stream.<R&gt;collect(java.util.function.Supplier<R&gt;,java.util.function.BiConsumer<R,? super capture#2, 共 ? extends java.io.Serializable&gt;,java.util.function.BiConsumer<R,R&gt;)不适用 &nbsp; &nbsp; &nbsp; (无法推断类型变量 R &nbsp; &nbsp; &nbsp; &nbsp; (实际参数列表和形式参数列表长度不同)) &nbsp; &nbsp; 方法 java.util.stream.Stream.<R,A&gt;collect(java.util.stream.Collector<? super capture#2, 共 ? extends java.io.Serializable,A,R&gt;)不适用 &nbsp; &nbsp; &nbsp; (无法推断类型变量 R,A,capture#3, 共 ?,T &nbsp; &nbsp; &nbsp; &nbsp; (参数不匹配; java.util.stream.Collector<capture#2, 共 ? extends java.io.Serializable,capture#4, 共 ?,java.util.List<capture#2, 共 ? extends java.io.Serializable&gt;&gt;无法转换为java.util.stream.Collector<? super capture#2, 共 ? extends java.io.Serializable,capture#4, 共 ?,java.util.List<capture#2, 共 ? extends java.io.Serializable&gt;&gt;))

[Johnson112358]

本地的jdk1.8启动失败，使用idea提供的已解决

[brushli]

我是遇到了，VITE_PROXY 选项设置错了，boot就用boot的