记录载入页面时与 ws://XXX地址/sockjs-node/xxx/websocket 的连接中断---解决办法

前言

在开发vue+springboot项目的时候,不清楚是跨域哪里没设置好还是怎么样,虽然对跨域方面没有影响,但是总弹出
警告让人心烦。
因此,在这个文章,记录一下如何解决,以防忘记

警告提示信息

根据浏览器不同,可能会对警告内容有进行翻译,所以一般情况能看到两种情况的警告都属于当前需要解决的问题。

情况一:

记录载入页面时与 ws://XXX地址/sockjs-node/xxx/websocket 的连接中断---解决办法
载入页面时与 ws://10.160.82.2:8083/sockjs-node/060/v1fz4jeu/websocket 的连接中断。

情况二:

记录载入页面时与 ws://XXX地址/sockjs-node/xxx/websocket 的连接中断---解决办法sockjs.js?9be2:1683 WebSocket connection to ‘ws://localhost:8083/sockjs-node/163/wprlyhno/websocket’ failed: Invalid frame header

解决方案

修改vue.config.js文件

一般情况,我们编写vue项目都是有配置文件的,包括跨域链接、端口修改等等,都是在配置文件修改

这次解决的方法,同样是在配置文件

修改前
module.exports = {
  publicPath: '/',
  lintOnSave: false,
  devServer: {
    disableHostCheck: true,
    open: false,
    port: 8083, // 前端端口
    proxy: { // 代理
      '^/': {
        target: 'http://localhost:后端端口/项目',// 连接后端跨域配置跨域
        changeOrigin: true,
        secure: false,
        pathRewrite: {
          '^/': '/'
        }
      }
    }
  }
};
修改后
module.exports = {
  publicPath: '/',
  lintOnSave: false,
  devServer: {
    disableHostCheck: true,
    open: false,
    port: 8083, // 前端端口
    proxy: { // 代理
      '^/': {
      ws: false // 在这里添加本代码
        target: 'http://localhost:后端端口/项目',// 连接后端跨域配置跨域
        changeOrigin: true,
        secure: false,
        pathRewrite: {
          '^/': '/'
        }
      }
    }
  }
};

重启前端

修改完之后,需要重启vue项目,不然配置文件是不会生效

结语

以上,该警告就不再弹出

上一篇:数据类型拓展


下一篇:【React】State & 生命周期