feat: 相同顶级域名不同子域名共享cookie

11 months ago · 5c07d8461c
parent c91cdeaa92
commit 5c07d8461c
9 changed files with 50 additions and 0 deletions
--- a/demoHtml/cookie.html
+++ b/demoHtml/cookie.html
@ -0,0 +1,17 @@
 <!doctype html>
 <html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta
            name="viewport"
            content="width=device-width, initial-scale=1.0"
        />
        <title>cookie</title>
    </head>
    <body>
        <div>我是cookie.test.com:52330设置cookie页面</div>
    </body>
 </html>
 <script>
    document.cookie = 'test-Cookie=我是测试相同顶级域名下不同子域名之间是否能共享cookie; domain=test.com; path=/; SameSite=Strict';
 </script>
--- a/src/router/modules/demo.ts
+++ b/src/router/modules/demo.ts
@ -52,6 +52,10 @@ const titleArr = [
        key: 'iframeEvent',
        title: 'iframe页面的事件监听',
    },
    {
        key: 'cookie',
        title: '相同顶级域名不同子域名共享cookie',
    },
 ];
 // @/views/demo/**/*.vue
--- a/src/views/demo/cookie/img/1.png
+++ b/src/views/demo/cookie/img/1.png
--- a/src/views/demo/cookie/img/2.png
+++ b/src/views/demo/cookie/img/2.png
--- a/src/views/demo/cookie/img/3.png
+++ b/src/views/demo/cookie/img/3.png
--- a/src/views/demo/cookie/img/4.png
+++ b/src/views/demo/cookie/img/4.png
--- a/src/views/demo/cookie/img/5.png
+++ b/src/views/demo/cookie/img/5.png
--- a/src/views/demo/cookie/index.vue
+++ b/src/views/demo/cookie/index.vue
@ -0,0 +1,27 @@
 <template>
    <div>
        <div>我是mgt.test.com:8848获取cookie页面</div>
        <div>通过控制台查看cookie</div>
        <img src="./img/1.png" />
        <img src="./img/2.png" />
        <img src="./img/3.png" />
        <img src="./img/4.png" />
        <img src="./img/5.png" />
    </div>
 </template>
 <script setup>
 import Cookies from 'js-cookie';
 /**
 * 1. 首先需要通过hosts设置域名映射(设置后需要刷新dns, mac命令`sudo killall -HUP mDNSResponder`)
 * 127.0.0.1 mgt.test.com
 * 127.0.0.1 cookie.test.com
 *
 * 2. 通过vscode启动/demoHtml/cookie.html本地服务，然后通过http://cookie.test.com:52330/demoHtml/cookie.html访问一次该页面，并生成cookie
 * 52330这个端口每次不一样，是vscode动态生成的
 *
 * 3. 最后启动该项目，然后通过http://mgt.test.com:8848/#/demo/cookie访问即可模拟不同子域名之间共享cookie的实现
 */
 console.log('test-Cookie', Cookies.get('test-Cookie'));
 </script>
--- a/src/views/demo/iframeEvent.vue
+++ b/src/views/demo/iframeEvent.vue
@ -1,5 +1,6 @@
 <template>
    <div class="iframe-event">
        <!-- 同源iframe嵌入页面 -->
        <iframe
            id="iframe1"
            src="/demoHtml/iframe.html"
@ -8,6 +9,7 @@
            height="300"
        />
        <!-- 下面这个地址是使用的vscode启动的本地服务，每次需要手动修改和修改该地址，这里是为了模拟跨域情况 --->
        <!-- 跨域iframe嵌入页面 -->
        <iframe
            id="iframe2"
            src="http://localhost:52330/demoHtml/iframe.html"