如何修复这些 SockJS ssl 错误？

Question

使用 vue-cli 3，我有一个 vue 应用程序在开发模式下呼啸而过。我调用 npm 运行服务，我看到...

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 作为站点的 public 地址。 Webpack（或sockjs）如何构造这个url？为什么它只给我一个直接的 http link 就认为这个端口上有 ssl？如果它基于地址栏协议的协议，为什么它会忽略地址栏主机名。我可以配置什么来使这些请求成功？

Answer 1

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。

Answer 2

这是一场斗争，但现在正在奏效...

在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，但那是另一回事了。

如何修复这些 SockJS ssl 错误？

How can I fix these SockJS ssl errors?

webpack

vue.js

webpack-dev-server