Cookie無法通過腳本讀取

Question

我正在嘗試使用js-cookie包通過以下Javascript代碼從瀏覽器中讀取js-cookie 。 但是，cookie未被讀取。

import Cookies from 'js-cookie';
var cookie_name = 'cookie';
var cookie = Cookies.get(cookie_name);
console.log(cookie);

使用以下使用Flask Python代碼創建cookie。

response.headers.add('Access-Control-Allow-Headers', 'Content-Type, text/plain')
response.headers.add('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS')
response.headers.add('Access-Control-Allow-Credentials', 'true')
response.set_cookie(key='cookie',
                value=payload,
                domain='<url>')

Flask應用程序具有以下參數

app = Flask(__name__)
app.config['DEBUG'] = True
app.config['SESSION_COOKIE_HTTPONLY'] = False

上面我已經關閉了HttpOnly標志，所以我的腳本應該能夠讀取cookie。 我也無法在瀏覽器中使用console.log(document.cookie)查看cookie。 我的JS代碼無法讀取cookie有什么理由嗎？

Answer 1

你應該使用'react-cookie'，通過npm安裝它。 然后在您的組件中嘗試導入HOC withCookies

import { withCookies } from 'react-cookie';

通過密鑰獲取cookie綁定

    function getCookieFucnctionTest(myRecordFromCookies) {
       var value = "; " + document.cookie;
       var parts = value.split("; " + myRecordFromCookies+ "=");
       if (parts.length === 2) return parts.pop().split(";").shift();
     }

在使用getCookieFucnctionTest並將其變成參數后

使用HOC導出組件

export default withCookies(MyComponent);

Answer 2

如果您在瀏覽器控制台中看不到cookie，則表示它未被設置或僅使用HTTP設置。

SESSION_COOKIE_HTTPONLY應該只影響Flask設置的會話cookie，看起來你試圖完全設置一個不同的cookie。

我會：

1. 確認cookie確實已設置（您可以通過開發工具進行檢查）
2. 如果正在設置，並且僅在啟用HTTP時設置，請更改您的代碼：

...

response.set_cookie(key='cookie', value=payload, domain=<url>, httponly=False)

Answer 3

您無法通過console.log(document.cookies)查看cookie的事實可能表明您的cookie的域或路徑與瀏覽器嘗試訪問的內容不匹配。

EG：如果您的后端/ Flask應用程序在api.example.com:8080上運行且客戶端使用www.example.com:80，那么您需要將域明確設置為.example.com以便在您的域中全局讀取，在AJAX請求中設置cookie時，您可能會遇到CORS錯誤，您可能需要將以下標題添加到Flask：

response.headers.add('Access-Control-Allow-Headers', 'Content-Type, Set-Cookie')
response.headers.add('Access-Control-Allow-Origin', 'http://www.example.com')
response.headers.add('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS')
response.headers.add('Access-Control-Allow-Credentials', 'true')
response.set_cookie(key='cookie',
                value=payload,
                domain='.example.com')

您也可以強制執行path='/'但是Flask默認情況下這樣做，無論如何您應該能夠看到您的Cookie甚至使用不同的路徑但是在您選擇的DevTools上的相同域上設置Application > Cookies （如果路徑設置不正確， console.log(document.cookies)不會產生任何結果或者可能會刪除你之后的cookie）