一、前言
最近在工作中遇到websockt代理问题，领导不想让socket地址写死，需要动态配置。
一般socket地址
let wsUrl = ws://IP地址:端口号/xxxx
const socket = new WebSocket(wsUrl);
代理socket地址
const wsUrl = `ws://${location.host}/wsUrl/xxx`; // 动态获取地址
const socket = new WebSocket(wsUrl); // 创建连接
这里的wsUrl可以是任意字符，只做代理使用，用户请求拦截标识，实际请求要去掉它。文章来源：https://www.toymoban.com/news/detail-853691.html
二、vite.config.js配置
server: {
...
proxy: {
'/wsUrl': {
target:'ws://socket地址', //这里是后台ws访问地址
changeOrigin: true, //允许跨域设置
ws: true, //websocket代理设置
rewrite: (path) => path.replace(/^\/wsUrl/, '') //拦截路径去除
},
}
注意: 这里需要使用rewrite去掉代理标识，因为这在实际的websockt地址中是不存在的！文章来源地址https://www.toymoban.com/news/detail-853691.html
三、在nginx中配置
...
http:{
...
server{
...
location /wsUrl/ {
rewrite ^/wsUrl/(.*)$ /$1 break; #拦截标识去除
proxy_pass http://socket服务地址; #这里是http不是ws，不用怀疑，代理的ip和port写ws访问的实际地址
proxy_http_version 1.1; #这里必须使用http 1.1
#下面两个必须设置，请求头设置为ws请求方式
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
}
...
}
...
}
到了这里，关于如何给websocket配置代理的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
