Failed to construct 'WebSocket': An insecure WebSocket connection may not be initiated from a page loaded over HTTPS.

问题描述:

Mixed Content: The page at 'https://AAAAAA.com' was loaded over HTTPS, but attempted to connect to the insecure WebSocket endpoint 'ws://10.100.100.100:30000/'. This request has been blocked; this endpoint must be available over WSS.
index.1ea3d99d.js:4 DOMException: Failed to construct 'WebSocket': An insecure WebSocket connection may not be initiated from a page loaded over HTTPS.

问题分析

  • HTTPS基于SSL依靠证书验证服务器身份,进行通信加密,我们的域名是https.所以非SSL验证的资源时浏览器可能会阻止。
  • ws://调用websocket服务器或者请求http://*都会报错

问题解决

  • 方案一:在前端将:ws:// 修改为:wss://,所有http改为https的资源
  • 方案二:配置nginx代理 
    server
    {
        listen 80;
        listen 443 ssl;
        server_name 域名;
     
        ssl on;
        ssl_certificate 证书.crt;
        ssl_certificate_key 证书.key;
        ssl_session_timeout 5m;
        ssl_session_cache shared:SSL:50m;
        ssl_protocols SSLv3 SSLv2 TLSv1 TLSv1.1 TLSv1.2; # 按此协议配置
        ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
        ssl_prefer_server_ciphers on;
        
        location /wss/  {   
         proxy_pass http://127.0.0.1:82/;        # 指向部署websocket的项目
         proxy_http_version 1.1;    
         proxy_set_header Upgrade $http_upgrade;    
         proxy_set_header Connection "Upgrade";    
         proxy_set_header X-real-ip $remote_addr;
         proxy_set_header X-Forwarded-For $remote_addr;
         }
    }

您可能还会喜欢: