聊一聊Electron生产环境cookie失效的问题

项目背景

项目运行在Windows系统下，架构为C/S。使用iframe加载第三方链接（所以没办法从第三方链接处理，只能前端这里处理）

技术栈

列出主要的和对项目影响大的技术框架

1. vue3
2. electron
3. vite
4. typescript

下面列出我的package.json（没有藏！都在这里）
注意版本哦

"dependencies": {
   
   
    "axios": "^1.4.0",
    "changedpi": "^1.0.4",
    "echarts": "^5.4.2",
    "electron-updater": "^6.1.1",
    "element-plus": "^2.3.6",
    "pinia": "^2.1.3",
    "vue": "^3.2.25",
    "vue-router": "^4.0.15",
    "winston": "^3.14.2",
    "winston-daily-rotate-file": "^5.0.0"
  },
  "devDependencies": {
   
   
    "@types/winston": "^2.4.4",
    "@vitejs/plugin-vue": "^2.3.3",
    "@vueuse/electron": "^8.5.0",
    "electron": "^19.0.0",
    "electron-builder": "^23.0.3",
    "electron-devtools-installer": "^3.2.0",
    "rimraf": "^3.0.2",
    "typescript": "^4.5.4",
    "unplugin-auto-import": "^0.16.4",
    "unplugin-vue-components": "^0.25.0",
    "vite": "^2.9.9",
    "vite-plugin-electron": "^0.4.5",
    "vue-tsc": "^0.34.7"
  },

问题描述：

开发环境是存储cookie是没问题的，为什么呢？排查后可以发现对于electron加载前端页面的方式不同

以下是相关代码

// 打开网址（加载页面）
    let winURL;
    if (app.isPackaged) {
   
   
    // app已经被打包（生产环境）
      winURL = args.route
        ? path.join(__dirname, `../index.html/#${
     
     args.route}`)
        : path.join(__dirname, "../index.html");
      win.loadFile(winURL);
    } else {
   
   
    // app没有被打包（开发环境）
      win.webContents.openDevTools();
      winURL = args.route
        ? `http://${
     
     process.env["VITE_DEV_SERVER_HOST"]}:${
     
     process.env["VITE_DEV_SERVER_PORT"]}${
     
     args.route}?winId=${
     
     args.id}`
        : `http://${
     
     process.env["VITE_DEV_SERVER_HOST"]}:${
     
     process.env["VITE_DEV_SERVER_PORT"]}?winId=${
     
     args.id}`;
      win.loadURL(winURL);
    }

以下对于两种方式 win.loadFile(winURL)和win.loadURL(winURL)聊一聊

loadURL(url);

通过从网络加载 URL，我这里是http协议打开一个url地址（类似在浏览器输入网址）

loadURL
用途：用于从网络加载 URL。
参数：
url：要加载的 URL 字符串。
options（可选）：一个对象，可以包含以下属性：
httpReferrer：HTTP 引用字符串。
userAgent：用户代理字符串。
extraHeaders：额外的 HTTP 请求头。
postData：POST 数据。
baseURLForDataURL：当加载的数据 URL 时使用的基 URL。

loadFile(filePath);

通过file协议打开一个文件目录地址（类似在本地资源管理器双击html页面）

loadFile
用途：用于从本地文件系统加载 HTML 文件。
参数：
filePath：要加载的本地 HTML 文件路径。
search（可选）：查询字符串。
hash（可选）：哈希片段。

在使用 loadFile 方法加载本地 HTML 文件时，处理 Cookies 的方式与使用 loadURL 加载网络 URL 有所不同。loadFile 不会自动处理 HTTP 请求和响应头中的 Cookies，因为它是从本地文件系统加载内容的，而不是通过网络请求。

解决问题思路

找到了问题，从源头我们应该把file换成url地址方式就好了。开始我也是这么想的。但是打包后改成url地址，必然要起一个sever服务，那么electron是可以使用http网络模块起vue3打包后的dist文件夹静态http服务的。

思路1（loadFile–换–>loadURL）测试失败

以下是相关代码

// serve-local-resources.ts
import * as http from "http";
import * as path from "path";
import * as fs from "fs";

let server: