egg.js 跨域 设置cookie

2021-04-06  本文已影响0人  IamaStupid

情形: egg.js 做后端接口, jQuery做前端请求。
设想:调用user/login接口后,后端设置cookie,然后前端每次请求都会自动带上cookie。
然而现实是后面的请求在控制台中,根本没有cookie;而且后端打印后面的接口也是没有cookie的。

后端跨域设置见:https://www.jianshu.com/p/202d760758d2

解决办法:
后端设置cookie:

                  // 登录验证成功后
                  ctx.cookies.set("username", param.name, {
                        maxAge: 1000 * 3600 * 24 * 7, // 有效期一天 * 7
                        httpOnly: true,
                        overwrite: true,//设置 key 相同的键值对如何处理
                        signed: true,//签名
                        encrypt: true, // 加密传输
                    });
                    ctx.cookies.set("userid", (jsonData[i].id + ''), {
                        maxAge: 1000 * 3600 * 24 * 7, // 有效期一天 * 7
                        httpOnly: true,
                        overwrite: true,//设置 key 相同的键值对如何处理
                        signed: true,//签名
                        encrypt: true, // 加密传输
                    });

前端ajax接口(login接口,后续的接口)都加上withCredentials:
xhrFields: {
withCredentials: true
},
crossDomain: true,

window.$.ajax({
        type: 'POST',
        url: config.apiServeUrl + '/user/login',
        data: JSON.stringify(obj),
        contentType: 'application/json;charset=utf-8',
        dataType: 'json',
        timeout: config.ajaxTimeout,
        xhrFields: {
            withCredentials: true
        },
        crossDomain: true,
        success: function(res) {
          alert(res.code + res.msg)
        },
        error: function(err) {
          console.log(err)
        }
      })
    }
image.png

ajax设置后,已经有cookie了。

egg.js controller中其他接口中获取浏览器带过来的cookie:

let cookie = ctx.cookies.get('userid', {
      encrypt: true
    })
console.log('cookie:', cookie, ctx.cookies.get('username', {
      encrypt: true
}))
image.png

清除cookie直接使用null替换即可:

ctx.cookies.set("userid", null)
上一篇下一篇

猜你喜欢

热点阅读