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"