Electron中Angular应用连Quarkus后端WebSocket遇403错误（file:// Origin）

针对Electron环境下Angular应用连接Quarkus WebSocket出现的403（file:// Origin）问题，推荐以下几种可行方案：

方案一：在Quarkus中自定义WebSocket握手配置 #

Quarkus默认CORS配置可能未覆盖WebSocket握手请求，需通过自定义ServerEndpointConfig.Configurator处理file:// Origin：

1. 创建自定义Configurator类：

import javax.websocket.HandshakeResponse;
import javax.websocket.server.HandshakeRequest;
import javax.websocket.server.ServerEndpointConfig;

public class FileOriginAllowConfigurator extends ServerEndpointConfig.Configurator {
    @Override
    public void modifyHandshake(ServerEndpointConfig config, HandshakeRequest request, HandshakeResponse response) {
        String origin = request.getHeaders().getFirst("Origin");
        if ("file://".equals(origin)) {
            response.getHeaders().put("Access-Control-Allow-Origin", java.util.Collections.singletonList("file://"));
            response.getHeaders().put("Access-Control-Allow-Credentials", java.util.Collections.singletonList("true"));
        }
        super.modifyHandshake(config, request, response);
    }
}

2. 在WebSocket端点类上引用该Configurator：

import javax.websocket.server.ServerEndpoint;

@ServerEndpoint(value = "/your-websocket-path", configurator = FileOriginAllowConfigurator.class)
public class YourWebSocketEndpoint {
    // 端点业务逻辑
}

3. 同步更新application.properties的CORS配置：

quarkus.http.cors.origins=file://,http://localhost:4200
quarkus.http.cors.enabled=true
quarkus.http.cors.credentials=true

方案二：修改Electron请求头，替换Origin为合法域名 #

在Electron层面拦截WebSocket请求，将Origin替换为Quarkus允许的域名（如Angular开发域名）：

在Electron主进程中添加请求拦截逻辑：

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

app.whenReady().then(() => {
    const mainWindow = new BrowserWindow({
        webPreferences: {
            nodeIntegration: false,
            contextIsolation: true
        }
    });

    // 拦截WebSocket握手请求，修改Origin
    session.defaultSession.webRequest.onBeforeSendHeaders((details, callback) => {
        if (details.url.startsWith('ws://your-quarkus-server:port/')) {
            details.requestHeaders['Origin'] = 'http://localhost:4200'; // 替换为Quarkus允许的Origin
        }
        callback({ cancel: false, requestHeaders: details.requestHeaders });
    });

    mainWindow.loadFile('dist/your-angular-app/index.html');
});

随后在Quarkus的application.properties中配置允许该Origin：

quarkus.http.cors.origins=http://localhost:4200
quarkus.http.cors.enabled=true
quarkus.http.cors.credentials=true

方案三：关闭Electron的web安全（仅开发环境使用） #

本地开发阶段可临时关闭Electron的web安全绕过Origin校验，生产环境绝对禁止使用：

const mainWindow = new BrowserWindow({
    webPreferences: {
        webSecurity: false,
        nodeIntegration: false,
        contextIsolation: true
    }
});

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