同站点不同页面 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 了。