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映射@Overridepublic 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("*"); //这意味着允许所有类型的请求头。}
}