浏览器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过程

先上架构图
浏览器cookie共享之同一域名下的不同子域名之间共享_第1张图片

项目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中无数据
    浏览器cookie共享之同一域名下的不同子域名之间共享_第2张图片
  2. 浏览器访问项目1地址:http://www.judith.com
    访问项目1后,将cookie设置到 judith.com域名上
    浏览器cookie共享之同一域名下的不同子域名之间共享_第3张图片
  3. 浏览器再访问项目2地址: http://console.judith.com
    再次访问项目2时,发现已经可以获取到项目1设置的cookie
    浏览器cookie共享之同一域名下的不同子域名之间共享_第4张图片

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

各大云平台,比如阿里云,具体如下:
官网:aliyun.com
控制台:console.aliyun.com
将cookie设置到一级域名aliyun.com下,各个子域名都可以共享 aliyun.com 下的cookie
浏览器cookie共享之同一域名下的不同子域名之间共享_第5张图片
浏览器cookie共享之同一域名下的不同子域名之间共享_第6张图片
浏览器cookie共享之同一域名下的不同子域名之间共享_第7张图片

参考

项目1和项目2源码

你可能感兴趣的:(服务器,前端,javascript)