解决:VUE nginx 部署 SSL https访问 WebSocket 问题
报错1.
Failed to construct 'WebSocket': An insecure WebSocket connection may not be initiated from a page loaded over HTTPS.
报错2.
说明:
http 是 ws:`ws://192.168.110.33:8080/websocket/${this.$store.state.user.name}`
https 是 wss: `wss://alarm.shijiguorui.com:443/websocket/${this.$store.state.user.name}`
1. 服务nginx代理使用http 访问 WebSocket 正常(前后端协议一直,都是http ws请求)
2. 服务nginx代理加入ssl证书协议,使用https 访问WebSocket 失败(前端https协议,后端http协议,导致协议不同访问失败)
3.总结:首先要保证前后端访问ip是 安全协议,其次主要就是保证能正常访问到443端口,也就是ssl安全协议默认端口443,后面添加这个443端口。
本人是把nginx 配置中的 “/websocket/” 拦截模块加到443模块中了。如果加到80 模块中可能前端请求连接中不需要配置443端口访问,因本人没试过。如需要可参考连接:nginx配置websocket或https的转发教程_renkai721的博客-CSDN博客_nginx配置websocket转发
到目前为止,也不知默认443端口不加为什么访问不到,如有了解的请留言。
前端配置如下:
Nginx 配置如下:
代码块:
// http
//const wsuri = `ws://ip:8080/websocket/${this.$store.state.user.name}`// https
const wsuri = `wss://域名:443/websocket/${this.$store.state.user.name}`
this.ws = wsuri
// 初始化ws
this.webSocket = new WebSocket(this.ws)# nginx https 服务配置server {# 侦听443端口listen 443 default ssl;# 定义访问域名server_name 域名;root html;index index.html index.htm;#证书文件名称ssl_certificate /etc/nginx/ssl/?.pem; #私钥文件名称ssl_certificate_key /etc/nginx/ssl/?.key;ssl_session_timeout 5m;ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;#表示使用的加密套件的类型。ssl_protocols TLSv1.1 TLSv1.2 TLSv1.3; #表示使用的TLS协议的类型,您需要自行评估是否配置TLSv1.1协议ssl_prefer_server_ciphers on;location / {# 存放了静态页面的根目录root /home/web/alarm;try_files $uri $uri/ /index.html;index index.html index.htm;}location /prod-api/ {proxy_set_header Host $http_host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header REMOTE-HOST $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;proxy_pass http://localhost:8099/;}#通过location进行处理,重点重点重点location /websocket/ {rewrite ^/api/(.*)$ /$1 break; # 带参数进行重写 过滤proxy_pass http://localhost:8099; # 后端接口连接#proxy_pass http://im-app;proxy_http_version 1.1;proxy_set_header Upgrade $http_upgrade;proxy_set_header Connection "upgrade";}error_page 500 502 503 504 /50x.html;location = /50x.html {root html;}}
解决:VUE nginx 部署 SSL https访问 WebSocket 问题相关推荐
- 配置nginx代理实现https访问
配置nginx代理实现https访问 Google宣布从Chrome网络浏览器的下一个稳定版本(90)开始,将为地址栏中输入的所有URL网址默认选择HTTPS协议.这意味着未启用HTTPS的网站的打开 ...
- nginx 强制使用https访问(http跳转到https)
nginx强制使用https访问(http跳转到https) 基于nginx搭建了一个https访问的虚拟主机,监听的域名是test.com,但是很多用户不清楚https和http的区别,会很容易敲成 ...
- nginx部署ssl转发https协议请求
在小程序上线的时候需要服务器为https请求,那么就需要ssl证书,SSL 证书就是遵守 SSL协议,由受信任的数字证书颁发机构CA,在验证服务器身份后颁发,具有服务器身份验证和数据传输加密功能.但后 ...
- 解决Vue打包部署到Nginx时,css样式不生效问题
今天在将使用Vue-cli编写的前端项目部署到Nginx的时候发生了一件很困扰的问题: Vue-cli项目在本地 使用 npm run dev的时候,页面样式是可以正常加载出来的,但是我将Vue-cl ...
- 一键安装部署SSL(https)——腾讯云服务器提供
背景介绍 SSL 证书的安装配置有非常多的博客文章介绍,但是基本上都是修改某些框架的配置文件来完成的,比如 tomcat, nginx 等等.当然,如果熟悉的话就非常简单,但是对于初学者而言就比较麻烦 ...
- Docker nginx部署阿里https(最新的方案)
1.安装nginx docker pull nginx 2.启动容器(注意80跟443,自己注意下自己的服务器 80.443端口有没有打开) docker run --name nginx -d -p ...
- 使用pm2+nginx部署koa2(https)
`` 今天先来写一下关于 koa2 网站运行部署以及 https 配置. 目前网站的大致结构是: koa2 的应用跑在 1113 端口,然后 nginx 反向代理到 443 (https) 端口, 同 ...
- nginx部署,可以访问首页,但是不能直接访问其他路径
问题 nginx部署前端项目, 访问网站首页没问题,即网站根目录.xxxxxx.com 直接访问其他目录时,报404.xxxxxx.com/home 解决方法 更改nginx配置文件. locatio ...
- linux nginx 配置ssl证书访问
http://www.linuxidc.com/Linux/2013-08/88271.htm 一.什么是 SSL 证书,什么是 HTTPS SSL 证书是一种数字证书,它使用 Secure Sock ...
最新文章
- DNS域名解析优化之tinydns/djbdns篇——测试篇
- Python【算法中心 01】Web框架Django入门(安装+项目创建+应用创建+服务启动)Python搭建算法中心后台实例分享
- Debian Linux下如何以root账号登录桌面
- 解决 iframe 后退不是主页面后退(浏览器 history)问题
- 流API--流的映射
- WATM与Tivoli、SIM同获2007网络技术大会网管系统选择奖
- 三菱PLC连接威纶通触摸屏
- Python数据处理Tips数据样本不均衡解决方法
- 【华为联机对战】下载运行华为官方Unity示例代码,提示鉴权失败并返回错误码100114
- 使用js完成一个类似于小广告的功能,斜着运动,遇到边界弹回
- 80004005错误代码_0x80004005,小编教你解决0x80004005错误代码的方法
- IDEA2018最新激活方式(可激活到2100年)
- python 将多个文件合并成一个文件
- Google 打开夜间模式 或者是护眼模式
- ubuntu16.04中安装Kdevelop和使用技巧
- 测试员必备:数据库Oracle+PLSQL常见操作文档整理!
- 现在有些女的一个月工资两三千,每个月消费差不多两三千,你认为这算经济独立吗?...
- oracle exp 详解,oracle exp 详解
- 基于Python的离线OCR图片文字识别(五)——终极版本
- 国际巨星Ricky Martin抒情MTV