网站升级成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的问题啦！