同站點不同頁面 Cookie 攜帶問題

一、前言

最近在做的一個項目，是由幾個模塊組成的。其中有幾個模塊需要在其他項目中也用到，所以單獨開發，發布的時候放在本項目的根目錄下。

系統做了權限認證，在登錄后返回 Token 存放在 Cookie 中。問題是：和登錄做一起的幾個模塊沒有問題，但是其他獨立的在請求資源的時候沒有攜帶 Cookie。

很是郁悶。

二、結構、問題說明

項目的基本結構是這樣的：

這個頁面是登錄后的 Home 界面。在這個地方，已經有 Cookie 了。

其中 A、B 模塊是單獨的獨立模塊。打包后的文件夾結構如下：

在 index.html 登錄后進入上面所示的 Home 界面。C、D、E 因為是和 index 是在一個項目里面打包的，點擊沒有問題。

但是 A、B 點擊就有問題，跳到了登錄。通過 F12 查看，在請求 A、B 資源的時候沒有攜帶 Cookie。按照 Cookie path 使用，只要是同一個站點下的，父級路徑上的 Cookie 在子級路徑請求中都會帶上 這個 Cookie。

這里應該是哪里出了問題？

三、解決

原先在配置的時候，BASE_URL 使用的是固定的 IP，例如：BASE_URL: '"http://192.168.1.120:8081"'。

現在改為自動獲取當前站點的 IP 和 Port：

const localAddress = window.location
const serverUrl = `${localAddress.protocol}//${localAddress.hostname}`
const BASE_URL = serverUrl + `:${process.env.BASE_PORT}`

使用這個方法后，A、B 資源請求都會帶上 Cookie 了。