vue项目 session无法存储

白衣莹墨
  • 37

使用 koa2 + koa-session, vue 2.6.11 + axios + ant-design-vue 模拟客户端登录

  • 使用 postman 可以存储cookie,每次都可以带上cookie请求,并且返回登录成功的数据
  • 使用vue,可以返回成功登录的数据,却无法在 chrome/devTool/cookies 中看到写入的cookie数据

请问会有什么原因导致这种情况呢?

服务器端部分代码:

// 用户不存在
if (!matchData.user) {
    return ctx.body = {
        success: false,
        err: "用户不存在"
    }
}

ctx.session.user = {
    _id: matchData.user._id,
    email: matchData.user.email,
    role: matchData.user.role,
    username: matchData.user.username
}

ctx.body = {
    success: true,
    body: ctx.session
}

客户端请求代码

import axios from 'axios'

function http(config) {
    const instance = axios.create({
        baseURL: "http://localhost:3000",
        timeout: 10000
    });
    
    instance.interceptors.request.use(config => {
        return config;
    }, error => {
        return Promise.reject(error);
    })
    
    instance.interceptors.response.use(response => {
        return response;
    }, error => {
        return Promise.reject(error);
    })
    
    return instance(config);
}

export function request(params) {
    return http({
        url: "/admin/login",
        method: "post",
        data: params
    })
}
回复
阅读 1.8k
2 个回答

axios使用data的方式发送数据, 需要设置 transformRequest,如下:

transformRequest: [
    function (data) {

        let ret = '';
        for (let it in data) {
            ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&';
        }
                
        return ret;
    }
]

如果需要带着cookie发送数据,需要设置 withCredentials 为 true,所有配置如下:

{
    url: "/admin/login",
    method: "post",
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
    },
    transformRequest: [
        function (data) {

            let ret = '';
            for (let it in data) {
                ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&';
            }

            return ret;
        }
    ],
    data: {
        "email": params.email,
        "password": params.password
    },
    withCredentials: true
}

!!!如果存在跨域问题,需要到服务器设置允许域,或者设置webapck代理
设置了 withCredentials: true,则Access-Control-Allow-Origin不能设置为*

参考:https://blog.csdn.net/nnsword...

你的后端需要处理的,你登录成功的返回要自己带上设置cookie的返回头,否则不会自动存储cookie。
image.png

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏