【无标题】前后端分离的项目，后端系统拿不到cookie

问题描述

前后端分离的系统中，后端服务拿不到cookie

一个前后端分离的项目，在前端页面中实现记住密码功能（下次访问登录页面，用户名密码等信息自动回显）。下面是前端系统Login.vue中的核心代码。

<script setup>
import {ref} from "vue"
import requestUtil from '@/util/request'
import store from '@/store'
import qs from 'qs'
import {ElMessage} from 'element-plus'
import router from "@/router"
import Cookies from "js-cookie"
import {encrypt, decrypt} from "@/util/jsencrypt"

const loginRef = ref(null);
const loginForm = ref({
    username: "",
    password: "",
    rememberMe: false
})
const loginRules = {
    username: [{required: true, trigger: "blur", message: "请输入您的账号"}],
    password: [{required: true, trigger: "blur", message: "请输入您的密码"}]
};
const handleLogin = () => {
    loginRef.value.validate(async (valid) => {
        if (valid) {
            // 勾选了需要记住密码设置在 cookie 中设置记住用户名和密码
            if (loginForm.value.rememberMe) {
                Cookies.set("username", loginForm.value.username, {expires: 30});
                Cookies.set("password", encrypt(loginForm.value.password), {expires: 30});
                Cookies.set("rememberMe", loginForm.value.rememberMe, {expires: 30});
            } else {
                // 否则移除
                Cookies.remove("username");
                Cookies.remove("password");
                Cookies.remove("rememberMe");
            }
            try {
                let result = await
                    requestUtil.post("login?" + qs.stringify(loginForm.value))
                let data = result.data;
                if (data.code === 200) {
                    const token = data.authorization;
                    store.commit('SET_TOKEN', token);
                    router.replace("/")
                } else {
                    ElMessage.error(data.msg)
                }
            } catch (error) {
                console.log("error:" + error);
                ElMessage.error("服务器出错，请联系管理员！")
            }
        } else {
            console.log("验证失败")
        }
    })
}

function getCookie() {
    const username = Cookies.get("username");
    const password = Cookies.get("password");
    const rememberMe = Cookies.get("rememberMe");
    loginForm.value = {
        username: username === undefined ? loginForm.value.username : username,
        password: password === undefined ? loginForm.value.password :
            decrypt(password),
        rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
    };
}

getCookie();
</script>

接下来我在后端服务中发现拿不到cookie，疑问？

---

原因分析：

前端端口是8080，后端端口是80
cookie是有的，但是浏览器存的是和前端系统8080连接的cookie，这里思维陷入到传统的前后端不分离当中（后端Java代码和前端页面不分离，单体系统，单个端口部署）。下面是浏览器与前端系统8080的cookie。