websocket使用遇坑

最新推荐文章于 2022-07-12 14:13:44 发布

零零历险记

最新推荐文章于 2022-07-12 14:13:44 发布

阅读量621

点赞数 1

分类专栏： vue

vue 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

在vue当中集成websocket，将会遇到不少坑，在此，便是一些常见的坑，希望能帮助到你。

首先，原生H5的开发，你需要引入两个JS库：sock.js和stomp.js，而使用vue官方框架之后，你需要从npm当中引入npm install sockjs-client和npm install @stomp/stompjs。

而在引入之后，你可能还会遇到一些问题。

1、请求时，出现

The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. Origin 'http://localhost:8889' is therefore not allowed access. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

这个是后台跨域处理时，使用了*，放行了所有域，但是浏览器处于安全，禁止了这个访问，解决方案一种，就是将后台 'Access-Control-Allow-Origin'指定ip。

2、在new SockJS('http://192.168.1.1:8080/test-info')时，内部要使用http，而非原生的ws://192.168.1.1:8080/test-info,否则会出现404错误

3、stompClient.send('/app/hello', {}, JSON.stringify(obj));推送消息给后台，或者与后台进行其他功能操作时，地址不需要在将具体ip写上，因为stomp当中已经记录了ip地址。