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

[dromara]

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

[zuihou]

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

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

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

# 后端为 zuihou-admin-cloud 项目： http://127.0.0.1:8760 表示zuihou-gateway-server服务的访问地址，非本机访问，请配置内网ip
# 后端为 zuihou-admin-boot 项目： http://127.0.0.1:8760 表示zuihou-authority-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: {
          //  zuihou-admin-cloud  项目使用这段配置
          ['^' + proxyUrl]: proxyUrl

          //  zuihou-admin-boot 项目 请使用以下的配置
          // ['^/api/oauth']: '/',
          // ['^/api/authority']: '/',
          // ['^/api/file']: '/',
          // ['^/api/msgs']: '/',
          // ['^/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 打包后的 zuihou-ui 文件夹，放到 /data/projects/ 目录下 
        location /zuihou-ui {
            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/1284756
• 可能的问题2：你使用了公网上部署的nacos 、或者部署的gateway服务和oauth服务的服务器网络不通。 解决方案： nacos、gateway、oauth 等服务要使用内网IP，且服务器之间内网互通，防火墙关闭。

[zuihou]

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

• 确保OauthApplication 启动成功
• 谷歌浏览器访问： 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 = ''
# URI 前缀，用于根据URI前缀进行代理  （请勿改动）
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/msgs']: '/',
          ['^/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 打包后的 zuihou-ui 文件夹，放到 /data/projects/ 目录下 
        location /zuihou-ui {
            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/msgs/ {
            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);
    }
}