vue+springboot2.0前后端分离项目传输cookie，获取cookie，返回cookie

上代码：前端vue:<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,ini

ky与你

11160人浏览 · 2018-08-23 10:21:54

ky与你 · 2018-08-23 10:21:54 发布

上代码：

前端vue:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <title>hello world</title>

</head>
<body>
<div id="app">
    <h1>hello world</h1>
    用户名: <input type="text" v-model="username">
    <button @click="submit">提交</button>
</div>
</body>

<script src="../static/js/vue.js"></script>
<script src="../static/js/axios.min.js"></script>
<script>
    axios.defaults.baseURL = 'http://localhost:8066'
    axios.defaults.withCredentials=true;
    new Vue({
        el: "#app",
        data() {
            return {
                username: ''
            }
        },
        methods: {
            submit() {
                axios.post('login', {
                    username: this.username
                }).then(function (response) {
                    console.log(response);
                }).catch(function (error) {
                    console.log(error);
                });
            }
        }
    })
</script>
</html>

后台java

跨域配置类：

@Configuration
public class CrossConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        //设置允许跨域的路径
        registry.addMapping("/**")
                //设置允许跨域请求的域名
                .allowedOrigins("*")
                //是否允许证书 不再默认开启
                .allowCredentials(true)
                //设置允许的方法
                .allowedMethods("*")
                //跨域允许时间
                .maxAge(3600);
    }
}

cookie工具类

public class CookieUtils {
    public static String getCookie(HttpServletRequest request, String cookieName) {

        Cookie[] cookies = request.getCookies();
        if (cookies != null) {
            for (Cookie cookie : cookies) {
                if (cookie.getName().equals(cookieName)) {
                    return cookie.getValue();
                }
            }
        }
        return null;
    }

    public static void writeCookie(HttpServletResponse response, String cookieName, String value) {
        Cookie cookie = new Cookie(cookieName, value);
        cookie.setPath("/");
        cookie.setMaxAge(5 * 60);
        response.addCookie(cookie);
    }
}

controller

@RestController
public class LoginController {
    final String TOKENX = "1234";

    @PostMapping("login")
    public String queryPoolList(@RequestBody User user, HttpServletResponse response,
                                @CookieValue(value = "token", required = false) String token) {
        if (token == null) {
            CookieUtils.writeCookie(response, "token", TOKENX);
        } else {
            System.out.println(token);
        }
        //返回前台
        return "成功";
    }
}

参考：

已经解决了

https://blog.csdn.net/heatdeath/article/details/79260053

https://blog.csdn.net/weixin_40648117/article/details/79066550

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^