Nginx反向代理WebSocket服务连接报错:WebSocket connection to “wss://xxx/xxx“ failed

news2025/7/17 12:57:02

最近使用 node.js 搭建 WebSocket 服务,在本地测试 connection 都是正常,于是部署到 Linux 服务上,需要用 Nginx 来反向代理 WebSocket 服务。浏览器控制台报错:WebSocket connection to 'wss://tiven.cn/ws/xxx' failed:,经过一番折腾,终于解决了这个报错。

Nginx WebSocket

介绍

WebSocket 协议与 HTTP 协议不同,但 WebSocket 握手与 HTTP 兼容,使用 HTTP 升级工具将连接从 HTTP 升级到 WebSocket。这允许 WebSocket 应用程序更容易地适应现有的基础架构。例如,WebSocket 应用程序可以使用标准 HTTP 端口80和443,从而允许使用现有的防火墙规则。

WebSocket 应用程序可以在客户端和服务器之间保持长时间运行的连接,从而有助于开发实时应用程序。 Nginx 反向代理用于将连接从 HTTP 升级到 WebSocket 的 HTTP 升级机制使用 UpgradeConnection 。反向代理服务器在支持 WebSocket 时面临一些挑战。一个是 WebSocket 是一个逐跳协议,因此当代理服务器拦截客户端的升级请求时,需要向后端服务器发送自己的升级请求,包括相应的头文件。此外,由于 WebSocket 连接长期存在,与 HTTP 使用的典型短期连接相反,反向代理需要允许这些连接保持打开状态,而不是关闭它们,因为它们似乎处于空闲状态。

允许在客户机和后端服务器之间建立隧道,Nginx 支持 WebSocket。对于 Nginx 将升级请求从客户端发送到后台服务器,必须明确设置 UpgradeConnection 标题。

总的来说,就是使用 Nginx 反向代理 WebSocket 服务时需要设置 UpgradeConnectionheader

nginx 配置

  1. 出现报错时的配置
location /ws {
    proxy_set_header  Host $host;
    proxy_set_header  X-Real-IP  $remote_addr;
    proxy_set_header  X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header  X-Forwarded-Proto   $scheme;
    proxy_pass        http://127.0.0.1:9000/ws;
}            
  1. 反向代理成功的配置
location /ws {
    proxy_set_header  Host $host;
    proxy_set_header  X-Real-IP  $remote_addr;
    proxy_set_header  X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header  X-Forwarded-Proto   $scheme;
    proxy_pass        http://127.0.0.1:9000/ws;
    
    # 关键配置 start
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
    # 关键配置 end
}            

完美解决报错问题(WebSocket connection to "xxx/xxx" failed)。


Nginx 相关推荐

  • Nginx学习与实战 · 配置HTTP2
  • Nginx学习与实战 · 解决SPA单页面应用CDN缓存问题
  • Nginx学习与实战 · 解决net::ERR_CONTENT_LENGTH_MISMATCH 206问题
  • Nginx warn:conflicting server name ‘127.0.0.1’ on 0.0.0.0:8010, ignored
  • Nginx反向代理WebSocket服务连接报错:WebSocket connection to ‘wss://xxx/xxx’ failed

欢迎访问:天问博客

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/407059.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

学会iframe并用其解决跨域问题

了解iframe 官方定义为:iframe是HTML标签,作用是文档中的文档,或者浮动的框架(FRAME)。iframe元素会创建包含另外一个文档的内联框架(即行内框架)。 简单理解为:iframe是一个内联框架,可以在当…

ES6 --- 解构赋值(数组,对象,函数)使用详解

解构赋值 JavaScript 中最常用的两种数据结构是 Object 和 Array。 对象让我们能够创建通过键来存储数据项的单个实体。数组则让我们能够将数据收集到一个有序的集合中。 但是,当我们把它们传递给函数时,函数可能不需要整个对象/数组。它可能只需要对…

[Vue warn]: Error in v-on handler: “TypeError: Cannot read properties of undefined (reading ‘$refs‘)

报错:[Vue warn]: Error in v-on handler: "TypeError: Cannot read properties of undefined (reading $refs)" 背景:1.在做vue项目时,在功能弹框中,想实现新增内容。 2. 报错原因是要触发menuCheckall组件后&#xff…

background-image使用

目录 background-image: url(" "); background-repeat属性(背景平铺) background-size属性(设置背景图片大小) background-position属性(背景图片位置) 1.background-image: url…

Vue中 Vue-Baidu-Map基本使用

前言 但我们遇到一项新技术或者没有写过的东西为了不走弯路我们只能先去模仿或者看官方文档 Vue这个框架相信大家都熟悉,只要是需要用的第三方平台它一般都会进行集成,比如Vue-Baidu-map 为什么有百度原生api为什么还需要插件,因为使用插件…

ref 引用(vue获取DOM元素)

ref 引用 jquery 牛逼 简化了程序员操作DOM的过程 vue 优势: MVVM 在 vue 中,程序员不需要操作DOM。只需要把数据维护好!(数据驱动视图) 结论:在 vue 项目,强烈不建议大家安装和使用jQuery!!&am…

CORS错误是什么如何解决?

通过http://localhost访问服务端时,出现CROS错误是什么问题该如何解决呢? 发生ajax跨域问题的原因:(三个原因同时满足才可能产生跨域问题) (1)浏览器限制 发生ajax跨域的问题的时候后端是正常执行的,从后台打印的日志可以看出,而且后台也会…

前端布局小案例,如何创建漂亮的毛玻璃输入表单卡片效果

在当今互联网时代,用户体验是至关重要的。当我们在设计网站或应用程序时,一个漂亮、吸引人的界面往往是吸引用户并提高用户满意度的关键因素之一。而一个好看的表单则可以提高用户提交的意愿和效率。本文将介绍如何使用HTML和CSS创建一个漂亮的毛玻璃输入…

vue3 响应式对象的 api 详解

文章目录Ⅰ. ref、reactive ( 递归监听 )Ⅱ. isRef、isReactive ( 判断 )Ⅲ. toRef 和 toRefs ( 解构 )Ⅳ. toRaw 、 markRaw ( 解除代理)Ⅴ. unref ( 拷贝 )Ⅵ. shallowRef 、shallowReactive( 非递归监听 )Ⅶ. triggerRef (强制更新&#x…

使用小程序制作一个老照片修复工具,让追忆时光触手可及

一、文章前言二、准备流程三、开发步骤四、完整代码一、文章前言 此文主要通过小程序来制作一个照片修复工具,实现黑白图片上色及图像效果增强等功能。 二、准备流程 2.1、注册百度开放平台及微信公众平台账号。 2.2、下载及安装微信Web开发者工具。 2.3、如需通过SDK调用及需…

LVGL V8应用——通过按键切换页面

一、按键切换对象 程序 全局变量 static lv_obj_t *contanier1 NULL; static lv_obj_t *contanier2 NULL;按钮对应回调函数,实现容器的切换 static void win_btn_event_callback1(lv_event_t* e) {lv_event_code_t code lv_event_get_code(e);if (code LV_EVE…

猿创征文|前端到全栈,一名 IT 初学者的学习与成长之路

目录导读写在前面创作之路❤ 前端开发工程师知识体系❤ Vue&React 开发框架❤ 前端开发实战❤ Linux&云原生小马技术栈❤ 主打技术专栏❤ 其他专栏(实用干货)❤ 技术栈词云学习与成长总结写在前面 2021 年 7 月 18 日我在 CSDN 发布了第一篇技术文章,距现在…

如何用html制作一个简单的网页

哈喽,大家好!我是小张。大家在浏览网页的时候有没有好奇过这个网页是怎么制作,其实只是制作一个简单的网页是很简单的。今天我就教一下大家如何用HTML制作一个简单的网页。 了解html 1. 学习html之前先要知道html是什么 HTML的全称为超文本标…

查看Chrome浏览器版本及下载对应的webdriver,并下载安装

查看Chrome浏览器版本及下载对应的webdriver,并下载 文章目录查看Chrome浏览器版本及下载对应的webdriver,并下载一,查看自己电脑的Chrome的版本二,webdriver的对应版本三,安装一,查看自己电脑的Chrome的版…

nvm介绍、安装、报错处理以及使用

前言 工作中我们偶尔可能同时在进行多个项目开发,而多个不同的项目所使用的 node 版本又是不一样的,在这种情况下,对于维护多个版本的node 将会是一件非常麻烦的事情,因为需要操作做卸载安装操作,而nvm 就是为解决这个…

关于Vue3的defineProps用法

之前只是单纯的会用,因为vue关于父子组件通讯差别有一点点大。 1.在父组件内传递变量的时候,需要加冒号:,否则你就只是单纯的传递了一个字符串而已。 2.在子组件里不需要引入defineProps就可调用该函数去接收父组件传来的属性。 我个人在这里…

axios基本使用及跨域问题详解

前端请求自然也发展迅速,从原生的XHR到jquery ajax,再到现在的axios和fetch。axios( https://axios-http.com/zh/ )是Vue推荐的http库,这个还是要了解一点的。 安装 $ npm install axios基本使用的例子 1、在main.j…

Vue项目:学生管理系统

💂 个人主页: 陶然同学🤟 版权: 本文由【陶然同学】原创、在CSDN首发、需要转载请联系博主💬 如果文章对你有帮助、欢迎关注、点赞、收藏(一键三连)和订阅专栏哦💅 想寻找共同成长的小伙伴,请点击【Java全栈开发社区】…

Nginx的安装配置教程

一、Nginx的下载与安装 Nginx是一款轻量级的Web服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器。其特点是占有内存少,并发能力强,事实上nginx的并发能力在同类型的网页服务器中表现较好 1.下载 在Nginx的官网的下载页面…

JavaScript-匿名函数

什么是匿名函数 1、匿名函数,即没有名称的函数 2、如果单独只写一个匿名函数,此时是不符合语法要求的 会报错。需要给 匿名函数包裹一个括号,使之成为表达式。 3、被小括号包裹的内容会被js识别为一个函数表达式 如何执行和使用匿名函数? …