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

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

更多关于uni-app 小程序WebSocket header中设置Origin后真机不能正常链接的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app 小程序WebSocket header中设置Origin后真机不能正常链接的实战教程也可以访问 https://www.itying.com/category-93-b0.html


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

问题原因

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

解决方案

  1. 不要手动设置 Origin 字段：小程序平台会自动处理 Origin 字段，因此你不需要也不应该手动设置它。移除 header 中的 Origin 字段，让小程序平台自动处理。

  2. 检查其他 header 字段：确保你设置的 header 字段都是小程序平台允许的。你可以参考小程序平台的官方文档，了解哪些 header 字段是可以设置的。

  3. 使用 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);
  }
});

  4. 调试和日志：如果问题仍然存在，建议在真机调试模式下查看详细的错误日志，以获取更多信息。你可以使用 uni.onSocketError 和 uni.onSocketClose 来捕获错误和关闭事件。

    uni.onSocketError((err) => {
  console.error('WebSocket error:', err);
});

uni.onSocketClose(() => {
  console.log('WebSocket closed');
});
回到顶部