如何修复这些 SockJS ssl 错误？

Posted 2023-02-22

【中文标题】如何修复这些 SockJS ssl 错误？

【英文标题】：How can I fix these SockJS ssl errors?

【发布时间】：2018-11-25 10:19:48

【问题描述】：

使用 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？如果它基于地址栏协议的协议，为什么它忽略地址栏主机名。我可以配置什么来使这些请求成功？

【参考方案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，但这是另一回事。

【讨论】：

对于快速浏览并使用 localhost 在本地工作的人来说，帮助我将此“公共”属性添加到 vue.config.js 中的 devServer 属性的关键部分：public: 'http://localhost:8080'

我对你的另一个故事同样感兴趣:)你能详细说明一下吗？

@AnandRockzz 在开发中使用 ssl，或者让您在开发中的 spa 与您的旧应用程序共享一个来源，我发现的最简单的解决方案是将 express 放在所有内容前面，然后反向 -代理到 webpack。你需要掌握的三个技巧是configuring reverse-proxy、terminating ssl和handing over websocket connections。

@AnandRockzz 问一个问题（并通知我）如果您希望我发布我的工作快递脚本。

我正在使用 apache 代理为我的开发服务器提供服务，并且此配置完美运行，谢谢 :)

【参考方案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。

【讨论】：

我是新手。我的 spa 需要集成到现有的 asp.net 应用程序中（向浏览器提供相同的 https 源），所以我在 IIS 上配置了一个反向代理，以将 spa 请求转发到 webpack 开发服务器。这就是为什么在屏幕截图中，您会在地址栏中看到https://notilusdev...。所以我能看到的唯一方法是让 HMR 请求遵循相同的管道，请求发送到https://notilusdev...，SSL 在 IIS 处终止，未加密的请求转发到 webpack 开发服务器。这可行吗？

这是可行的，但绝对不能使用 IIS，它的反向代理配置是噩梦般的。我用 Express 做了反向代理，它既简单又轻松。