问题1：Failed to construct ‘WebSocket’: An insecure WebSocket connection may not be initiated from a page loaded over HTTPS.
Problem Description
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.
problem analysis
- HTTPS is based on SSL and relies on certificates to verify the identity of the server and encrypt communications. Our domain name is https. Therefore, browsers may block non-SSL-verified resources.
- ws:// calling the websocket server or requesting http://* will report an error
problem solved
- Solution 1: Change: ws:// to: wss:// at the front end, and change all http to https resources
- Solution 2: Configure nginx proxy
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.
Problem Description
Uncaught DOMException: Failed to execute 'send' on 'WebSocket': Still in CONNECTING state.
problem analysis
The webscoket connection flag has four values, corresponding to different states, as follows:
- WebSocket.CONNECTING: The value is 0, indicating that it is connecting;
- WebSocket.OPEN: The value is 1, indicating that the connection is successful and communication is possible;
- WebSocket.CLOSING: The value is 2, indicating that the connection is being closed;
- WebSocket.CLOSED: The value is 3, indicating that the connection has been closed, or failed to open the connection.
The reason for this error: WebSocket is in the state of being connected (CONNECTING), but the connection has not been successful, and then the caller calls the send method to send, so still in connecting
problem solved
- Execute the send method in the websocket open function
ws.onopen = () => {
ws.send('i am xiaojin');
}
- Determine the status of the websocket connection, and then send
if (ws.readyState===1) {
ws.send()
}
I will write here today~
- Friends, (￣ω￣(￣ω￣〃 (￣ω￣〃)ゝ See you tomorrow~~
- Everyone be happy every day
Everyone is welcome to point out where the article needs to be corrected~
Learning is endless, cooperation is win-win
