uni-app 小程序WebSocket header中设置Origin后真机不能正常链接

示例代码：

uni.connectSocket({
url: 'wss://xxx.cn/api/chat_message',
header: {
'Origin': 'wss://xxx.cn',
'Authorization': 'Bearer ' + that.$store.state.token,
},
success: (res) => {
console.log('connectSocket success' + JSON.stringify(res) )
},
fail: (res) => {
console.log('connectSocket fail' + res)
}
});

操作步骤：

在header中设置origin属性

预期结果：

socket可以正常链接

实际结果：

真机链接出错

bug描述：

WebSocket header中设置Origin后真机不能正常链接，会触发uni.onSocketError errcode 1004。模拟器上正常

项目信息	值
产品分类	uniapp/小程序/微信
PC开发环境操作系统	Windows
PC开发环境操作系统版本号	win10
HBuilderX类型	正式
HBuilderX版本号	3.98
第三方开发者工具版本号	1.06.2303060
基础库版本号	3.0.0
项目创建方式	HBuilderX

phonegap100 1楼•17 天前

在 uni-app 中，如果你在小程序中使用 WebSocket 并尝试在 header 中设置 Origin，可能会遇到真机无法正常连接的问题。这是因为小程序平台对 WebSocket 的 header 有一些限制，特别是 Origin 字段。

问题原因

小程序平台（如微信小程序）对 WebSocket 的 header 有严格的限制，不允许开发者随意修改某些特定的 header 字段，包括 Origin。这些字段是由小程序平台自动管理的，开发者无法直接修改。

解决方案

不要手动设置 Origin 字段：小程序平台会自动处理 Origin 字段，因此你不需要也不应该手动设置它。移除 header 中的 Origin 字段，让小程序平台自动处理。
检查其他 header 字段：确保你设置的 header 字段都是小程序平台允许的。你可以参考小程序平台的官方文档，了解哪些 header 字段是可以设置的。

使用 uni.connectSocket 的正确方式：确保你使用 uni.connectSocket 时，header 中只包含允许的字段。例如：

uni.connectSocket({
  url: 'wss://your.websocket.url',
  header: {
    'Custom-Header': 'your-custom-value'
  },
  success: () => {
    console.log('WebSocket connected');
  },
  fail: (err) => {
    console.error('WebSocket connection failed', err);
  }
});

调试和日志：如果问题仍然存在，建议在真机调试模式下查看详细的错误日志，以获取更多信息。你可以使用 uni.onSocketError 和 uni.onSocketClose 来捕获错误和关闭事件。
```
uni.onSocketError((err) => {
  console.error('WebSocket error:', err);
});

uni.onSocketClose(() => {
  console.log('WebSocket closed');
});
```