Vite+mkcert配置HTTPS本地环境时Spotify OAuth重定向URI报错

我正尝试在Electron应用中集成Spotify登录功能，前端通过Vite部署在https://localhost:3000。已经用mkcert配置了本地HTTPS，vite.config.ts的配置如下：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import fs from 'fs';
import path from 'path';

export default defineConfig({
  plugins: [react()],
  server: {
    https: {
      key: fs.readFileSync('localhost-key.pem'),
      cert: fs.readFileSync('localhost.pem'),
    },
    port: 3000,
  },
});

已经在Spotify开发者控制台添加了重定向URI https://localhost:3000/callback，但使用该URL时出现错误：

INVALID_CLIENT: Insecure redirect URI

解决步骤： #

• 信任本地证书：运行mkcert -install，确保mkcert生成的证书被系统信任。Spotify的OAuth服务会校验证书合法性，未被信任的本地HTTPS证书会被判定为不安全。
• 检查重定向URI格式：在Spotify开发者控制台中，重定向URI不要带双引号，直接填写https://localhost:3000/callback，保存后等待配置生效（可能需要几分钟）。
• 调整Electron的web安全配置：开发环境下，在Electron主进程创建窗口时，临时关闭web安全或允许不安全内容加载，避免Electron拦截本地证书：

const { BrowserWindow } = require('electron');

const mainWindow = new BrowserWindow({
  webPreferences: {
    webSecurity: false, // 仅开发环境使用，生产环境需移除
    allowRunningInsecureContent: true
  }
});

• 改用自定义协议重定向：对于桌面应用，更稳定的方式是使用自定义协议（如spotify-my-app://callback）。在Spotify控制台添加该URI，然后在Electron中监听协议激活事件处理回调，彻底绕开HTTPS证书问题：

const { app } = require('electron');

app.setAsDefaultProtocolClient('spotify-my-app');

app.on('open-url', (event, url) => {
  // 处理Spotify回调的授权码
  const code = new URL(url).searchParams.get('code');
  // 后续逻辑...
});

内容的提问来源于stack exchange，提问作者Hassan Rehan