网站升级成https后websocket调用报错了

背景

我们有个问答的需求,需要调用大模型服务。大模型服务方提供的接口是websocket的。在本地调试调用没有问题。放到线上之后报错了:

Uncaught DOMException: Failed to construct 'WebSocket': An insecure WebSocket connection may not be initiated from a page loaded over HTTPS.
    at <anonymous>:1:10

大致意思就是https下面访问websocket是不安全的。

思路

看到这个现象首先想到的两个思路:

  • 自写后端服务转接大模型问答的websocket接口,在后端把websocket接口转为websocket+ssl(wss)
  • 通过nginx转发websocket接口

第一个思路是不可行的,前端(192.168.0.6)去直接调用另外一个服务(192.168.0.8)的wss接口对于浏览器来说是异源的,存在证书安全问题会报错:

Error in connection establishment: net::ERR_CERT_AUTHORITY_INVALID

那么下面我们直接给出nginx配置解决方案。

解决

在192.168.0.6的机器上修改nginx.conf配置文件的server部分:

    server{
      listen 443 ssl;
      server_name localhost;
      # ssl on;
      ssl_certificate /etc/nginx/keystore/uat.cer; #SSL璇𶀿功
      ssl_certificate_key /etc/nginx/keystore/uat.key; #SSL瀵𷐿𺐿
     
 
      # limit request body size
      client_max_body_size 100m;

      # 主要是这里,wss转发配置
      location /webSocket/llm/ {
      
        # 大模型问答websocket接口
        proxy_pass http://192.168.0.8:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_set_header Host $host;
      }
      # 其他location
      ......
  }

那么现在我在前端访问:wss://192.168.0.6/webSocket/llm/,请求就会转发到ws://192.168.0.8:3000/webSocket/llm/。大家可以根据参考适当修改,以适应自己的需求。

这样就解决了在https不能访问ws的问题啦!

评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值