问题1: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;
}
}
问题2:34. ws.9341e94c.js:1 Uncaught DOMException: Failed to execute ‘send’ on ‘WebSocket’: Still in CONNECTING state.
问题描述
Uncaught DOMException: Failed to execute 'send' on 'WebSocket': Still in CONNECTING state.
问题分析
webscoket连接标志有四个值,分别对应不同的状态,如下:
- WebSocket.CONNECTING:值为0,表示正在连接;
- WebSocket.OPEN:值为1,表示连接成功,可以通信了;
- WebSocket.CLOSING:值为2,表示连接正在关闭;
- WebSocket.CLOSED:值为3,表示连接已经关闭,或者打开连接失败。
这个错误原因:WebSocket处在正在连接的状态(CONNECTING),其实还没有连接成功,然后调用者又调用了send方法发送,所以still in connecting
问题解决
- 在websocket open函数里面执行send方法
ws.onopen = () => {
ws.send('i am xiaojin');
}
- 判断websocket链接状态,再进行发送
if (ws.readyState===1) {
ws.send()
}
今天就写到这里啦~
- 小伙伴们,( ̄ω ̄( ̄ω ̄〃 ( ̄ω ̄〃)ゝ我们明天再见啦~~
- 大家要天天开心哦
欢迎大家指出文章需要改正之处~
学无止境,合作共赢文章来源:https://www.toymoban.com/news/detail-474634.html
文章来源地址https://www.toymoban.com/news/detail-474634.html
欢迎路过的小哥哥小姐姐们提出更好的意见哇~~
到了这里,关于websocket报错集锦-不断更新中的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!