如何修复这些 SockJS ssl 错误？

Question

使用 vue-cli 3，我有一个 vue 应用程序在开发模式下运转。我调用 npm run serve，我看到了……

DONE  Compiled successfully in 431ms                                                                                                                                                                   
16:26:43
App running at:
- Local:   http://localhost:8080/mobileapp/v/
- Network: http://172.18.55.202:8080/mobileapp/v/

（路径/mobileapp/v/来自baseUrl配置变量。域notilusdev.dimosoftware.com/mobileapp指向iis中的vdir，对/mobileapp/v/的请求被反向代理到webpack-dev-server）

在浏览器中，应用程序启动没有问题。然后它开始向https://172.18.55.202:8080/sockjs-node/info?t=1529072806971 发起请求。这些请求失败，因为该端口上没有 ssl。我什至不希望 ip 作为网站的公共地址。 Webpack（或 sockjs）如何构造这个 url？当它刚刚给我一个直接的http链接时，为什么它认为这个端口上有ssl？如果它基于地址栏协议的协议，为什么它忽略地址栏主机名。我可以配置什么来使这些请求成功？

Answer 1

这是一场斗争，但现在正在发挥作用......

为 vue.config 中的devServer 对象添加一个public 属性。

我需要的属性是 public，而不是 publicPath，而且关键在于 vue 将忽略 configureWebpack{ devServer: { 中的配置更改。您需要使用顶级 devServer 属性。

所以我的工作 vue.config.js 是...

module.exports = {
  baseUrl: process.env.NODE_ENV === 'production'
    ? '/production-sub-path/'
    : '\/mobileapp\/v\/',
    devServer :{
      public : 'notilusdev.dimosoftware.com',
      host : '0.0.0.0',
      disableHostCheck : true
    }  
}

然后我需要通过 express 反向代理 https 和 wss:// 请求，终止 express 中的 ssl，但这是另一回事。

Answer 2

Web 套接字从配置的 URL 推断架构。

您需要向 devServer 配置明确提供 key/cert/pem? 以支持此功能。否则，它将尝试使用自签名证书，这当然不适用于您的情况。

devSever: {
  ...,
  key: fs.readFileSync('/path/to/server.key'),
  cert: fs.readFileSync('/path/to/server.crt'),
  ca: fs.readFileSync('/path/to/ca.pem'),
}

这将使用正确的 SSL 并解决您的问题。

附注

您也不能只是决定不使用https 进行 websocket 连接。但是，如果您不想通过此操作，您可以完全不使用 HTTPS，而只需照常使用 localhost:8081。