Electron应用访问本地API与Cloud Functions时出现CORS错误求助

看起来你遇到了Electron应用调用API时的跨域CORS问题，我来帮你一步步排查和解决～

先梳理下你的现状：你的Electron应用运行在 http://localhost:1212，调用本地http://localhost:5001或者Cloud Functions的API接口时，触发了CORS报错，核心是预飞行OPTIONS请求的响应里缺少Access-Control-Allow-Origin头，导致Electron的Chromium内核阻止了请求。

一、先排查本地Express API的CORS配置问题 #

你的CORS中间件配置里，allowedOrigins设置的是不带末尾斜杠的http://localhost:1212，但从报错信息看，你的Electron应用的origin是带末尾斜杠的http://localhost:1212/——这会导致allowedOrigins.includes(origin)的判断不匹配，CORS中间件会直接拒绝这个请求，自然不会返回允许跨域的响应头。

解决办法：修正origin匹配逻辑 #

调整你的CORS中间件代码，处理origin末尾的斜杠问题，或者用更灵活的匹配方式：

const cors = require('cors');

const corsMiddleware = cors({
    origin: (origin, callback) => {
        const allowedOrigins = [
            'http://localhost:1212',
            'https://us-central1-nft-discord-relay.cloudfunctions.net',
        ];
        // 标准化origin：去掉末尾的斜杠，避免匹配失败
        const normalizedOrigin = origin?.replace(/\/$/, '');
        
        // 允许无origin的请求（比如Postman），或者匹配标准化后的origin
        if (!origin || allowedOrigins.includes(normalizedOrigin)) {
            callback(null, true);
        } else {
            callback(new Error('Not allowed by CORS'));
        }
    },
    methods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'],
    allowedHeaders: ['Content-Type', 'Authorization'],
    credentials: true,
    maxAge: 86400, // Cache preflight requests for 24 hours
});

module.exports = corsMiddleware;

另外还要确认：CORS中间件要在所有路由之前挂载。如果你的主Express app里是先挂载其他路由再挂载CORS中间件，那配置也不会生效。比如主文件应该这样写：

const express = require('express');
const app = express();
const corsMiddleware = require('./path-to-cors-middleware');
const farmerRouter = require('./path-to-your-router');

// 先全局挂载CORS中间件，或者在路由之前挂载
app.use(corsMiddleware);
// 再挂载你的API路由
app.use('/api', farmerRouter);

app.listen(5001, () => {
    console.log('Local API running on http://localhost:5001');
});

二、Cloud Functions的CORS处理 #

如果你调用的是Google Cloud Functions，CORS的处理需要适配Cloud Functions的运行环境：

1. 你可以直接用cors包，但要包裹整个请求处理逻辑
2. 确保允许的origin包含你的Electron地址http://localhost:1212

示例代码：

const cors = require('cors')({
    origin: (origin, callback) => {
        const allowedOrigins = [
            'http://localhost:1212',
            'https://us-central1-nft-discord-relay.cloudfunctions.net'
        ];
        const normalizedOrigin = origin?.replace(/\/$/, '');
        if (!origin || allowedOrigins.includes(normalizedOrigin)) {
            callback(null, true);
        } else {
            callback(new Error('Not allowed by CORS'));
        }
    }
});
const functions = require('firebase-functions');

exports.api = functions.https.onRequest((req, res) => {
    // 用cors中间件包裹请求处理
    cors(req, res, () => {
        // 这里放置你的路由逻辑，比如/farmer/validate的处理
        if (req.path === '/farmer/validate' && req.method === 'POST') {
            // 处理请求逻辑
            const { discordId, farmerCode, walletAddress } = req.body;
            // ...你的验证逻辑
            res.status(200).json({ isValid: true, message: '验证通过' });
        } else {
            res.status(404).json({ error: '接口不存在' });
        }
    });
});

三、Electron开发环境临时兜底方案 #

如果API端的配置暂时无法生效，你可以在Electron主进程里关闭webSecurity（仅开发环境使用，生产环境绝对不能开！），绕过Chromium的CORS检查：

在你的Electron主进程代码（比如main.js）里：

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

function createMainWindow() {
    const mainWindow = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            contextIsolation: false, // 根据你的Electron版本调整，新版本可能需要配置
            nodeIntegration: true,
            webSecurity: false, // 关闭webSecurity，临时绕过CORS
            allowRunningInsecureContent: true, // 允许http请求（如果你的API是http的话）
        }
    });

    mainWindow.loadURL('http://localhost:1212');
}

app.whenReady().then(createMainWindow);

四、验证CORS配置是否生效 #

你可以用curl发送预飞行OPTIONS请求，验证API的响应头是否包含Access-Control-Allow-Origin：

curl -X OPTIONS http://localhost:5001/nft-discord-relay/us-central1/api/farmer/validate \
  -H "Origin: http://localhost:1212" \
  -H "Access-Control-Request-Method: POST" \
  -H "Access-Control-Request-Headers: Content-Type" \
  -v

如果响应头里能看到Access-Control-Allow-Origin: http://localhost:1212，说明CORS配置已经生效了。

备注：内容来源于stack exchange，提问作者chenzen