浏览器cookie共享之同一域名下的不同子域名之间共享

在Web开发中，cookie是一种常见的机制，用于在客户端和服务器之间传递数据。在同一域名下的不同子域名之间共享cookie是一种很常见的需求，比如在 www.judith.com 和 console.judith.com 之间共享cookie。
在了解如何实现在同一域名下的不同子域名之间共享cookie之前，让我们先了解一下什么是cookie。Cookie是一种文本文件，由服务器生成并存储在客户端（浏览器）中。当客户端向服务器发送请求时，它会自动将cookie发送到服务器。cookie通常用于存储用户的偏好设置、登录凭据等信息。
在同一域名下的不同子域名之间共享cookie的关键在于域名。在Web开发中，域名是指网站的主机名。例如，在 www.judith.com 中，域名是 judith.com 。同一域名下的不同子域名属于同一主域名，主域名下的cookie在不同子域名中都是可见的。
接下来，我们将介绍如何实现在同一域名下的不同子域名之间共享cookie。

设置cookie的域名属性

在创建cookie时，可以设置cookie的域名属性。如果设置为主域名，那么不同子域名之间就可以共享cookie。例如，如果设置域名为 judith.com ，那么www.judith.com和console.judith.com之间就可以共享cookie。

Set-Cookie: key=value; domain=.judith.com;

使用顶级域名作为cookie的域名

另一种实现在同一域名下的不同子域名之间共享cookie的方法是使用顶级域名作为cookie的域名。例如，使用http://.com或.net作为cookie的域名，可以使不同子域名之间共享cookie。

Set-Cookie: key=value; domain=.com;

需要注意的是，使用顶级域名作为cookie的域名可能会导致安全问题，因为cookie可能被其他网站访问到。因此，建议只在内部网络或安全性较低的环境中使用此方法。
在实现在同一域名下的不同子域名之间共享cookie时，还需要注意以下几点：

• cookie的路径属性应该设置为主域名，以便在所有子域名中都可见。例如，path=/。
• cookie的过期时间应该设置为合适的时间，以便在不同子域名之间共享cookie。
• 不同子域名之间的cookie也可以相互覆盖，因此需要注意cookie的命名和作用域。

总之，在同一域名下的不同子域名之间共享cookie是一种非常有用的技术，可以使不同子域名之间共享用户信息，从而提高网站的用户体验。但是，在实现这种技术时，需要注意安全性和正确性，以确保cookie不被其他网站访问到，同时保证cookie的正确性和一致性。

手把手实现不同子域名共享cookie过程

先上架构图

项目1设置cookie

项目1在 ComponentDidMount的时候将cookie设置到domain judth.com上，具体代码如下

import Cookies from 'js-cookie';
import { useEffect } from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  useEffect(() => {
    Cookies.set('name', 'Judith Huang', { domain: 'judith.com' });
  }, []);

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          this is project1, react port is 3001
        </p>
      </header>
    </div>
  );
}

export default App;

项目2读取cookie

在项目2中并未设置cookie，如果先访问项目1，再访问项目2时，可以获取到项目1设置的cookie

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          this is project2, react port is 3002
        </p>
        <p>
          读取到的cookie是: {document.cookie}
        </p>
      </header>
    </div>
  );
}

export default App;

nginx配置

项目1和项目2都监听80端口

# project1.conf
server {
  listen 80;
  # 项目1的域名
  server_name www.judith.com;

  location / {
  # 项目1的服务地址
    proxy_pass http://localhost:3001;
  }
}

# project2.conf
server {
  listen 80;
  # 项目2的域名
  server_name console.judith.com;

  location / {
  # 项目2的服务地址
    proxy_pass http://localhost:3002;
  }
}

修改hosts文件

将127.0.0.1分别映射到www.judith.com和console.judith.com域名

# windows WSL hosts文件路径
vim /mnt/c/Windows/System32/drivers/etc/hosts
# linux/Mac系统hosts文件路径
vim /etc/hosts

浏览器访问

1. 浏览器访问项目2地址: http://console.judith.com
   此时项目2的Cookie中无数据
   
2. 浏览器访问项目1地址：http://www.judith.com
   访问项目1后，将cookie设置到 judith.com域名上
   
3. 浏览器再访问项目2地址: http://console.judith.com
   再次访问项目2时，发现已经可以获取到项目1设置的cookie
   

使用此方式实现共享cookie的大佬们

各大云平台，比如阿里云，具体如下：
官网：aliyun.com
控制台：console.aliyun.com
将cookie设置到一级域名aliyun.com下，各个子域名都可以共享 aliyun.com 下的cookie

参考

项目1和项目2源码