1、问题

使用WebSocket在本地是没有问题的，能够和前端进行正常交互，但是将项目部署到服务器上，发现和前端建立不了WebSocket的连接，打开浏览器控制台报错：This request has been blocked; this endpoint must be available over WSS.

2、理解

1、首先我们要明白 wss协议实际是websocket+SSL，就是在websocket协议上加入SSL层，类似https(http+SSL)。

2、利用nginx代理wss【通讯原理及流程】

（1）、客户端发起wss连接连到nginx

（2）、nginx将wss协议的数据转换成ws协议数据并转发到Workerman的websocket协议端口

（3）、Workerman收到数据后做业务逻辑处理

（4）、Workerman给客户端发送消息时，则是相反的过程，数据经过nginx/转换成wss协议然后发给客户端

3、关于 ws 和 wss

WebSocket可以使用 ws 或 wss 来作为统一资源标志符，类似于 HTTP 或 HTTPS。其中，wss 表示在 TLS 之上的 WebSocket，相当于 HTTPS。默认情况下，WebSocket的 ws 协议基于Http的 80 端口；当运行在TLS之上时，wss 协议默认是基于Http的 443 端口。说白了，wss 就是 ws 基于 SSL 的安全传输，与 HTTPS 一样样的道理。所以，如果你的网站是 HTTPS 协议的，那你就不能使用 ws:// 了，浏览器会 block 掉连接，和 HTTPS 下不允许 HTTP 请求一样。

4、解决

前提，服务器已经配置好了Nginx。如果没有配置的可以去网上搜索，很多资料的。如果找不到资料的小伙伴可以看文章的最后，我会把我的nginx配置贴出来。

在前端将：ws:// 修改为：wss://即可，同时，后面不要跟IP地址加端口，要使用网站的域名，例如：

本地websocket链接：ws://192.168.0.46:8781/tf/webSocket/huozhu20220819
>
那么更新到哦服务器的时候，链接应该修改为：wss://网站域名/tf/webSocket/huozhu20220819

注意：这里直接使用域名是在Nginx做了代理，可以根据url自动匹配到对应的IP地址+端口

5、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/;        #通过配置端口指向部署websocker的项目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;}
}

感谢：
1、https://www.jianshu.com/p/581d4b777615
2、https://blog.csdn.net/qq_35808136/article/details/89677749

解决 This request has been blocked； this endpoint must be available over WSS.相关推荐

【WEB前端】【报错解决】This request has been blocked; the content must be served over HTTPS....
问题描述部署WEB项目后,开启了强制HTTPS,产生如下错误: Mixed Content: The page at 'https://ask.mllt.vip/index.php/data1.ht ...
【Https异常】This request has been blocked； the content must be served over HTTPS
[Https异常]This request has been blocked; the content must be served over HTTPS 参考文章: (1)[Https异常]This ...
解决：Request header field Content-Type is not allowed by Access-Control-Allow-Headers
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. 1. 前端 vue 工程 post 请求后端接口,报错: Request header field ...
解决uni.request时uni.showtoast无效问题
问题描述封装API请求的时候,uni.request时uni.showtoastw无效: var promise = new Promise((resolve,reject) => {var ...
解决:Required request body is missing
报错信息: WARN DefaultHandlerExceptionResolver:384 - Failed to read HTTP message: org.s ...
解决 413 Request Entity Too Large
今天测试环境图片上传出现:Status Code:413 Request Entity Too Large 这是由于客服端可服务端之间采用了nginx做反向代理,当请求长度超过客户端(client_m ...
已解决urllib.request.urlretrieve下载文件报错403
已解决(python使用urlopen/urlretrieve下载文件时出现403 forbidden)urllib.error.HTTPError: HTTP Error 403: Forbidde ...
三个思路解决413 Request Entity Too Large报错处理
最近一个项目当中,要求上传图片,并且限制图片大小,虽然在laravel当中已经添加了相关的表单验证来阻止文件过大的上传,然而当提交表单时,还没轮到laravel处理,nginx就先报错了.当你仔细看报 ...
https下 http的会被阻塞 This request has been blocked; the content must be served over HTTPS.
如何在HTTPS 网页中引入HTTP资源: Mixed Content? https://segmentfault.com/q/1010000005872734/a-1020000005874533 ...

解决 This request has been blocked； this endpoint must be available over WSS.