Vue前端中从后端获取图片验证码

• 前端发送请求

<template>
  <el-form :model="user" :rules="rules" ref="userForm" class="login" label-width="auto" style="max-width: 600px">
    <el-form-item label="用户名" prop="name" >
      <el-input v-model="user.name" id="name" placeholder="请输入用户名" />
    </el-form-item>
    <el-form-item label="密码" prop="pass">
      <el-input v-model="user.pass" id="pass" placeholder="请输入密码"/>
    </el-form-item>

    <el-form-item label="验证码" prop="captcha">
      <el-input v-model="user.captcha" id="captcha" placeholder="请输入验证码"/>
      <img :src="captchaUrl" alt="验证码" @click="refreshCaptcha">
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit" class="btn">登录</el-button>
    </el-form-item>

  </el-form>
</template>

<script lang="ts" setup>
import {onMounted, reactive, ref} from 'vue'
import Schema from "async-validator";
import {ElMessage} from "element-plus";
import axios from "axios";
// 响应式的对象
const user = reactive({
  name: '',
  pass: '',
  captcha:''
})

// 设置验证规则
const rules = {
  name: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 3, max: 30, message: '长度在 3 到 30 个字符', trigger: 'blur' },
  ],
  pass: [{ required: true, message: '请输入密码', trigger: 'blur' }],
}


//  创建对表单的引用
const userForm = ref(null);

// 点击登录按钮的时候，验证是否满足rules规则
const onSubmit = () => {
  if (userForm.value){
    userForm.value.validate((valid: boolean)=>{
      if (valid){
        //验证通过，执行登录逻辑
        console.log(user);
        ElMessage.success("登录成功")
      }else {
        //表单验证未通过，显示错误信息
        ElMessage.error("请检查输入的内容")
        return false
      }
    })
  }
}


// 验证码
// 使用 ref 创建响应式数据
const captchaUrl =  ref('');
// 刷新验证码
const refreshCaptcha = ()=>{
  axios.get('http://localhost:8080/captcha',{responseType : 'blob'})
      .then(response =>{
        captchaUrl.value = URL.createObjectURL(new Blob([response.data]));
      })
      .catch(error=>{
        console.log("获取验证码失败",error)
      })
}

// 组件挂载时加载验证码
onMounted(()=>{
  refreshCaptcha();
})
</script>

• 后端响应

@RestController
@Slf4j
public class LoginController {
    //获取验证码
    @CrossOrigin
    @GetMapping("/captcha")
    public void captcha(HttpServletResponse response, HttpServletRequest request) throws IOException {
        SpecCaptcha captcha = new SpecCaptcha(150,40);
        String text = captcha.text();
        captcha.out(response.getOutputStream());
    }

}

• 解决跨域

package com.kfm.bisheserve.config;

import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

/**
 * @author 27359
 * date:2024/5/29
 */
public class CorsWebMvcConfig implements WebMvcConfigurer {
//    配置CORS映射
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")  //这个映射适用于所有URL模式（/**），表示对于所有请求，都应用这个CORS配置
                .allowedOriginPatterns("/**")  //这意味着允许所有域名的请求访问你的后端服务。
                .allowedMethods("*")  //这意味着允许所有类型的HTTP请求（如GET、POST、PUT、DELETE等）。
                .allowCredentials(true) //这通常与Access-Control-Allow-Origin响应头一起使用，以允许跨域请求携带cookie。
                .maxAge(3600)  //这意味着浏览器可以缓存预检请求的结果，避免在每次跨域请求时都发送预检请求
                .allowedHeaders("*"); //这意味着允许所有类型的请求头。
    }
}