Angular 10 中 localhost:4200 上的 Cookie 和本地存儲為空

Question

為什么我的應用程序在 localhost 上運行時沒有將任何內容保存到 Cookie 和本地存儲中？

它是 Angular10/Express 應用程序。

如果我在服務器上部署應用程序並訪問該網站，那么當我檢查應用程序時，我可以看到 Cookies 被填充並正在使用本地存儲，但如果我在 localhost (:4200 FE,:3000 BE) 上運行應用程序，那么 Cookies 和本地存儲是空的。

我遇到的問題是，例如 express BE 使用 CSRF 進行保護（這可以被注釋掉）但是在 FE 上這不會保存任何東西localStorage.setItem('authUser', JSON.stringify(authUser)); 后來使應用程序中基於角色的頁面無法使用。

這發生在所有瀏覽器（Chrome、Firefox 和 Safari）中。

我錯過了什么？ 似乎是一些非常簡單的問題，但 seach 沒有幫助。

Answer 1

所以問題不在於瀏覽器，而在於如何設置 Angular 應用程序。 我遇到的問題是成功登錄后有幾個請求，但由於我的帳戶沒有所需的角色，其中一個請求失敗。 此請求因 401 未授權而失敗。 該失敗的請求自動調用了注銷功能，該功能實現了明確的 localStorage 功能。

但是，看起來該應用程序仍然無法正常工作，因為我必須通過添加以下內容來排除特定登錄路徑的 CSRF 令牌：

    // this has been inspired by other answer
    // https://stackoverflow.com/questions/24992139/node-js-use-csurf-conditionally-with-express-4
    var conditionalCSRF = function (req, res, next) {
      //compute needCSRF here as appropriate based on req.path or whatever
      if ('/api/auth/login') {
        next();
      } else {
        csurf(req, res, next);
      }
    };