当前位置：首页 > 行业动态 > 正文

cookie不同域名

admin
行业动态
2025-02-07
10

Cookie是小文本文件，不同域名下Cookie相互独立，浏览器按域名区分管理。

在Web开发中，Cookie是一种常见的机制，用于在客户端和服务器之间传递数据，在同一域名下的不同子域名之间共享Cookie是一种很常见的需求，下面将详细介绍如何实现这一功能：

一、设置Cookie的域名属性

1、主域名设置：在创建Cookie时，可以设置Cookie的域名属性为主域名，如果主域名是judith.com，那么在www.judith.com和console.judith.com之间就可以共享Cookie，具体代码如下：

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

2、顶级域名设置：另一种方法是使用顶级域名作为Cookie的域名，使用http://.com或.net作为Cookie的域名，可以使不同子域名之间共享Cookie，但需要注意的是，使用顶级域名作为Cookie的域名可能会导致安全问题，因为Cookie可能被其他网站访问到，建议只在内部网络或安全性较低的环境中使用此方法。

二、注意事项

1、路径属性：Cookie的路径属性应该设置为主域名，以便在所有子域名中都可见，path=/。

2、过期时间：Cookie的过期时间应该设置为合适的时间，以便在不同子域名之间共享Cookie。

3、命名管理：不同子域名之间的Cookie也可以相互覆盖，因此需要注意Cookie的命名和作用域。

三、手把手实现不同子域名共享Cookie过程

以React应用为例，假设有两个项目分别运行在www.judith.com和console.judith.com上：

1、项目1设置Cookie：在ComponentDidMount的时候将Cookie设置到domain judith.com上，具体代码如下：

“`javascript

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’ });

cookie不同域名

}, []);

return (

<p>

this is project1, react port is 3001

</p>

</header>

</div>

);

}

cookie不同域名

2、项目2读取Cookie：在项目2中并未设置Cookie，如果先访问项目1，再访问项目2时，可以获取到项目1设置的Cookie，具体代码如下：
   ```javascript
     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>
       );
     }

3、Nginx配置和hosts文件修改：为了模拟多子域名环境，需要修改Nginx配置和hosts文件，具体步骤如下：

修改Nginx配置文件（如nginx.conf）中的server块，添加两个server块分别对应两个项目。

“`nginx

server {

listen 80;

server_name www.judith.com;

location / {

proxy_pass http://localhost:3001;

}

server {

listen 80;

cookie不同域名

server_name console.judith.com;

location / {

proxy_pass http://localhost:3002;

}

 将127.0.0.1分别映射到www.judith.com和console.judith.com域名，在Linux/Mac系统下，hosts文件通常位于/etc/hosts；在Windows系统下，hosts文件通常位于C:WindowsSystem32driversetchosts，编辑hosts文件，添加以下内容：
     ```
       127.0.0.1 www.judith.com
       127.0.0.1 console.judith.com

浏览器访问项目2地址：http://console.judith.com，此时项目2的Cookie中无数据，浏览器访问项目1地址：http://www.judith.com，访问项目1后，再次访问项目2地址：http://console.judith.com，可以在项目2中获取到项目1设置的Cookie。