ai客服项目中发现的问题:

可以在控制台看到我们存储的cookie:

可以看到是这样的,

但是我们通过getCookie方法专门获取这个字段, 然后在控制台打印后

const userName = getTheCookie('SA_USER_NICK_NAME');
console.log(userName, 'userName');

输出结果是:

你好你好你好你好

然后我们尝试通过decodeURIComponent进行解码:

const userName = getTheCookie('SA_USER_NICK_NAME');
console.log(userName, 'userName');const decodeResult = decodeURIComponent(userName)
console.log(decodeResult, 'decodeResult')

结果仍然是:

你好你好你好你好   userName

你好你好你好你好    decodeResult

我们尝试了多种方法, 包括使用 encodeURIComponent 方法先转码在解码还是不行,

我们经过调试, 发现是项目中使用的公司自己的gitCookie方法的问题导致的, 于是我们自己写了一个gitTheCookie方法:

function getTheCookie(name) {// 获取当前页面的所有 cookieconst cookies = document.cookie;// 如果没有 cookie，则返回空字符串if (cookies === '') {return '';}// 查找特定名称的 cookie 值const cookieName = name + '=';const cookieArray = cookies.split(';');for (let i = 0; i < cookieArray.length; i++) {let cookie = cookieArray[i].trim();// 判断是否以指定名称开头if (cookie.indexOf(cookieName) === 0) {// 返回 cookie 值，解码后的return decodeURIComponent(cookie.substring(cookieName.length));}}// 如果没有找到对应的 cookie，则返回空字符串return '';}

通过这个方法, 我们成功在控制台输出了: 存储在cookie中的汉字: 你好你好你好你好

因为这是html文件, 所以不能像vue3那样使用, 下面我们通过原生js获取元素, 使用textContent进行了相应的替换:

const userName = getTheCookie('SA_USER_NICK_NAME');console.log(userName, 'userName');// 使用 querySelector 获取第一个 p 元素并设置其内容const greetingParagraph = document.querySelector('.helpWarp .user dd p');greetingParagraph.textContent = `Hi，${userName}`;// 假设已经获取了最新的用户名并存储在变量 userName 中const onlineUsername = document.querySelector('.shortcut .online dl dt em');onlineUsername.textContent = userName;

上面这样就将浏览器cookie中存储的用户名字, 成功显示在当前页面中了.

后续我们遇到了调用接口已经登录, 但是接口仍然返回600的情况:

我们询问后端同事后, 了解到我们携带的请求头中没有携带所有的cookie, 

问:

function getUserInfo() {//获取用户信息$.ajax({url: 'https://xxxx.xxxx.com/api/ucenter/xxxx/xxxx',type: 'GET',contentType: 'application/json;charset=UTF-8',success: function (res) {console.log(res, 'res')if (res.data != "{}") {var getCodeName = res.data.goodsTypeCode}}})}getUserInfo();请求的时候没有携带cookie请问该怎么办才能带上?

回答:

要在 AJAX 请求中携带 cookie，可以使用 xhrFields 属性来设置 withCredentials 为 true。这样，浏览器就会在请求中包含当前域名下的 cookie。修改后的代码如下：function getUserInfo() {//获取用户信息$.ajax({url: 'https://xxxx.xxxx.com/api/ucenter/xxxx/xxxx',type: 'GET',contentType: 'application/json;charset=UTF-8',xhrFields: {withCredentials: true},success: function (res) {console.log(res, 'res')if (res.data.mobile) { $('.popup_online p').text(res.data.mobile)}}})
}
getUserInfo();
在这个例子中，
我们添加了 xhrFields 属性，并将 withCredentials 设置为 true。这样，浏览器就会在请求中包含当前域名下的 cookie。请注意，如果你的请求是跨域的，服务器需要设置 Access-Control-Allow-Credentials 头为 true，才能让浏览器发送包含 cookie 的请求