跨域请求的WebHID设备控制代理

最新推荐文章于 2025-12-15 12:46:33 发布

原创最新推荐文章于 2025-12-15 12:46:33 发布 · 1.5k 阅读

22 ·

CC 4.0 BY-SA版权

文章标签：

#python

跨域请求与WebHID的限制

WebHID API允许网页与HID（人机接口设备）直接交互，但受浏览器同源策略限制，跨域请求无法直接访问设备。需要通过代理或后端服务解决跨域问题。

代理服务器方案

构建一个后端代理服务器，前端通过该服务器间接访问WebHID设备。代理服务器需要处理跨域请求并转发指令。

后端代码示例（Node.js + Express）：

const express = require('express');
const cors = require('cors');
const app = express();

app.use(cors());
app.post('/hid-command', (req, res) => {
  // 处理WebHID指令并返回响应
  res.json({ status: 'success' });
});

app.listen(3000, () => console.log('Proxy server running on port 3000'));

前端与代理通信

前端通过HTTP请求与代理服务器交互，代理服务器负责与WebHID设备通信。

前端代码示例：

async function sendHidCommand(command) {
  const response = await fetch('http://localhost:3000/hid-command', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ command }),
  });
  return response.json();
}

CORS配置

确保代理服务器正确配置CORS（跨域资源共享），允许前端域名访问。

CORS配置示例：

app.use(cors({
  origin: 'https://your-frontend-domain.com',
  methods: ['GET', 'POST'],
}));

WebHID设备权限处理

代理服务器需要模拟前端请求的设备权限，确保HID设备访问合法。

权限验证逻辑：

app.post('/hid-command', async (req, res) => {
  const device = await navigator.hid.requestDevice({ filters: [] });
  if (!device) return res.status(403).json({ error: 'Permission denied' });
  // 继续处理指令
});

安全性考虑

使用HTTPS加密通信。
验证前端请求来源，防止CSRF攻击。
限制可访问的HID设备列表。

替代方案：WebSockets

对于实时性要求高的场景，可以使用WebSockets替代HTTP代理。

WebSocket示例：

const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', (ws) => {
  ws.on('message', (message) => {
    // 处理HID指令
  });
});