由于不同的 url，cookie 不适用于 react 项目的两个不同 url答案

【问题标题】：cookie is not working for two different urls of react projects due to different urls由于不同的 url，cookie 不适用于 react 项目的两个不同 url
【发布时间】：2020-08-24 09:15:19
【问题描述】：

我正在使用 tiny-cookie 保存 2 个不同项目的语言，例如 abc.dev.example.com 和 xyz.dev.example.com，如下所示

setCookie('language', lang)

由于项目在本地开发环境中的 localhost:3000 和 localhost:8000 上运行；在 chrome 调试器中，对于 cookie 域，如图所示，域是相同的，即 localhost 参见下面的屏幕截图（localhost:3000 相同）

现在，当我切换到 localhost:3000 时，我得到的语言是预期的 tr。但是，当我在他们的域上部署项目时；语言正在保存并显示在 chrome 应用程序区域中，但域不同。

如何解决此问题以使其开始工作。我还尝试将两个 url 的域（我在 chrome 应用程序中将其设为 .dev.meeraspace.com）编辑为相同，然后它开始工作。我也在两个项目中尝试了下面的代码，比如

setCookie('language', lang, { domain: '.dev.example.com' })
setCookie('language', lang, { domain: '.dev.example.com' })

任何人都可以面对这样的问题吗？请帮忙。谢谢

【问题讨论】：

这不是问题 - 这是设计使然。要共享相同的 cookie，两个应用程序必须在同一个域中工作 - stackoverflow.com/questions/1612177/… 或者您需要一些后端服务来在域之间共享用户设置

标签： javascript reactjs setcookie

【解决方案1】：

我通过以下代码使两个域相同来实现这一点：

const url = new URL(window.location.href)
    if (url.hostname !== 'localhost') {
      const domainParts = url.hostname.split('.')
      domainParts.shift()
      const options = {
        domain: `.${domainParts.join('.')}`
      }
      setCookie('language', lang, options)
    } else {
      setCookie('language', lang)
    }

它现在正在获取和保存相同的域，即.dev.example.com

我希望它可以帮助某人。

【讨论】：