又遇到生产与开发环境结果不一致问题。。。

0 阅读1分钟

问题展现

功能背景

一个坐席详情页面功能,用到, 聊天记录接口与sse连接实时推送聊天记录,该逻辑为

async useMessageList() {
      if (!this.agentNo) {
        return;
      }

      this.loading = true;
      try {

        const res = await getMessageList({
          agentNo: this.agentNo,
          pageNum: this.pageNum,
          // seachCallId: this.seachCallId,
          pageSize: this.pageSize,
        });

        ...



        this.initSse();
        
      } catch (error) {
        console.error('获取消息列表失败:', error);
        // this.$message.error('获取消息列表失败');
      } finally {
        this.loading = false;
      }
    },
    
     initSse() {
      if (this.wsConnected) {
        return;
      }
      const uuid = crypto.randomUUID();
      this.uuid = uuid;
      const agentNo = `${this.agentNo}:${uuid}`
      
      const wsUrl = 'xxx'
      this.$ws.connect(wsUrl);


    },

问题出在crypto

开发环境上

image.png

生产环境上

image.png

可见该crypto缺少了部分方法。

crypto详解

在mdn文档中crypto是浏览器原生的加密api,版本要求是

image.png

同时也存在一个限制,那就是非localhso与https无法使用randomUUID函数,既这也是生产与开发不一致的罪魁祸首。

image.png