前后端分离axios跨域使用 springboot+vue

问题遇到的现象和发生背景

使用axios跨域,向后台传递登录名和密码

问题相关代码,请勿粘贴截图
@GetMapping("/login")
@ResponseBody
public String login(@Validated SysUser user, HttpServletRequest request, HttpServletResponse resp)  {
    String loginName = user.getLoginName();
    String password = user.getPassword();
    SysUser userForBase=userRepository.findByLoginNameAndPassWord(loginName,password);
    System.out.println("------------------------------"+userForBase);
    if(userForBase==null){
        String msg = "用户名或者密码错误";
        return msg;
    }

methods: {
submitLogin(loginForm) {
// const _this = this;
this.$refs[loginForm].validate((valid) => {
if (valid) {
axios.get('http://localhost:8282/SysUser/login',{params:{
loginName:this.loginForm.username,
password:this.loginForm.password
}}).then(function (resp){
console.log(resp)
// _this.$router.push('/index')
});
} else {
return false;
}
});
},
}

@Configuration
public class CrosConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOrigins("")
.allowedMethods("POST", "GET", "PUT", "OPTIONS", "DELETE")
.allowCredentials(true)
.allowedHeaders("
")
.maxAge(3600);
}
}

运行结果及报错内容

img

我的解答思路和尝试过的方法
我想要达到的结果

vue2在config/index.js中配置
vue3在根目录的vue.config.js中配置
module.exports={
devServer:{
proxy:{
["/web"]:{
target:'http://localhost:8282',
changeOrigin:true
}
}
}
}

axios.get('http://localhost:8282/SysUser/login',{params:{
这个不要写ip和端口,用你vue配置的代理转到后端