从 Electron UI 连接套接字到 python 服务器时出现错误 400（错误请求）

Question

我在使用 Web 套接字连接 Electron 和 Python 时遇到了一些问题（主要是作为学习经验）：

• 使用 Electron Ok构建桌面应用程序

• 构建一个Python程序来监控一些事情

• 使用 socket.io 连接 Python 和 Electron不工作

首先，我使用https://github.com/miguelgrinberg/python-socketio/tree/master/examples/server/aiohttp中的“延迟”示例在 python 中测试了 socket.io 。当我在 Chrome 中查看http://localhost:8080/时，效果非常好。

下一步是要求 Electron 在桌面应用程序中加载相同的 url mainWindow.loadURL('http://localhost:8080')（我使用了官方示例中的模板electron-quick-start）。我只需在 html 中添加两行，如下所示：Electron: jQuery 没有为 jquery 定义以在 Electron 中正确加载，但它再次运行良好。

现在我尝试创建一个index.html具有相同内容的latency.html并使用 加载它mainWindow.loadFile('gui/index.html')。我改变了线路var socket = io.connect();（var socket = io.connect('ws://localhost:8080');我也尝试过ws://127.0.0.1:8080和ws://192.168.<x>.<x>:8080）。html 文件正确加载，但套接字开始重复连接和断开连接，并出现错误请求错误（我添加了两行 console.log 行）：

(console.log) connected
(error)       POST http://localhost:8080/socket.io/?EIO=3&transport=polling&t=MosNuF3&sid=c62ce5a6090c4b72bf3f7c6916da6ce7 400 (Bad Request)   **polling-xhr.js:264**
(console.log) disconnected
(warning)     websocket.js:235 WebSocket connection to 'ws://localhost:8080/socket.io/?EIO=3&transport=websocket&sid=c62ce5a6090c4b72bf3f7c6916da6ce7' failed: WebSocket is closed before the connection is established.
(error)       POST http://localhost:8080/socket.io/?EIO=3&transport=polling&t=MosNuFS&sid=c62ce5a6090c4b72bf3f7c6916da6ce7 400 (Bad Request)   **polling-xhr.js:264**
(console.log) connected
etc...
(console.log) disconnected
etc...

在服务器端，当我停止 Electron 应用程序时，也出现错误：

Unhandled exception
Traceback (most recent call last):
  File "D:\Programming\Tools\Anaconda3\lib\site-packages\aiohttp\web_protocol.py", line 447, in start
    await resp.prepare(request)
  File "D:\Programming\Tools\Anaconda3\lib\site-packages\aiohttp\web_response.py", line 353, in prepare
    return await self._start(request)
  File "D:\Programming\Tools\Anaconda3\lib\site-packages\aiohttp\web_response.py", line 667, in _start
    return await super()._start(request)
  File "D:\Programming\Tools\Anaconda3\lib\site-packages\aiohttp\web_response.py", line 410, in _start
    await writer.write_headers(status_line, headers)
  File "D:\Programming\Tools\Anaconda3\lib\site-packages\aiohttp\http_writer.py", line 112, in write_headers
    self._write(buf)
  File "D:\Programming\Tools\Anaconda3\lib\site-packages\aiohttp\http_writer.py", line 67, in _write
    raise ConnectionResetError('Cannot write to closing transport')
ConnectionResetError: Cannot write to closing transport

在这种情况下，这个错误请求错误意味着什么？连接如何正确工作？

谢谢。

Answer 1

万一有人遇到同样的问题。答案非常简单，来自 socket.io 的文档：

出于安全原因，该服务器默认强制执行同源策略。实际上，这意味着以下内容：

• 如果传入的 HTTP 或 WebSocket 请求包含 Origin 标头，则此标头必须与连接 URL 的方案和主机匹配。如果不匹配，则会返回 400 状态代码响应并拒绝连接。
• 对于不包含 Origin 标头的传入请求不施加任何限制。

如有必要，可以使用 cors_allowed_origins 选项来允许其他来源。可以将此参数设置为字符串以设置单个允许的来源，或设置为列表以允许多个来源。特殊值“*”可用于指示服务器允许所有来源，但应谨慎执行此操作，因为这可能会使服务器容易受到跨站点请求伪造 (CSRF) 攻击。

当使用 Electron 加载 gui 时，服务器与执行监控的 python 服务器不同，因此会出现错误请求（不是同源）。解决方案是只需修改服务器属性添加如下cors_allowed_origins='*'：

socketio.AsyncServer(async_mode='aiohttp', cors_allowed_origins='*')