js獲取cookie獲取不到問題 vue獲取cookie以及獲取不到問題

1.下載依賴包

npm i js-cookie -S

2.在使用cookie的頁面上進行引入

import Cookies from 'js-cookie'

3.使用

• 創建一個在整個網站上有效的Cookie
• Cookies.set('name', 'value');
• 創建一個從現在起7天后過期的cookie，在整個站點上有效：
• Cookies.set('name', 'value', { expires: 7 });
• 創建一個過期的cookie，對當前頁面的路徑有效：
• Cookies.set('name', 'value', { expires: 7, path: '' });
• 讀取cookie：
• Cookies.get('name'); // => 'value' Cookies.get('nothing'); // => undefined
• 閱讀所有可見的Cookie
• Cookies.get(); // => { name: 'value' }
• 刪除cookie：
• Cookies.remove('name');
• 刪除對當前頁面路徑有效的cookie：
• Cookies.set('name', 'value', { path: '' }); Cookies.remove('name'); // fail! Cookies.remove('name', { path: '' }); // removed!
  重要！刪除cookie時，您必須傳遞用於設置cookie的完全相同的路徑和域屬性，除非您依賴於默認屬性。
  注意：刪除未存在的cookie不會引發任何異常，也不會返回任何值

4.針對瀏覽器存在cookie，前端卻獲取不到的問題：

• httpOnly默認為true打對號√情況下，禁止javascript操作cookie，導致獲取不到，可以讓后端設置false；

• 后端使用node+koa，種客戶端一個cookie，但是在客戶端內通過document.cookie獲取不了此cookie。經查是由於koa通過ctx.cookies.set(name, value, [options])種的cookie是自動默認帶httpOnly的，httpOnly是服務器可訪問 cookie, 默認是 true。禁止javascript操作cookie（為避免跨域腳本(xss)攻擊，通過javascript的document.cookie無法訪問帶有HttpOnly標記的cookie。）
  所以通過在后端設置ctx.cookies.set(name, value, {httpOnly:false})關掉httponly即可。