如何使用webpack-dev-server代理到一个SSL端点

Question

当我尝试代理这个http://localhost:9000/rpc请求时，我收到以下信息：

cannot proxy to https://example.appspot.com:80 
  (write EPROTO  101057795:error:140770FC:SSL routines:
  SSL23_GET_SERVER_HELLO:unknown protocol:openssl\ssl\s23_clnt.c:794:)

webpack-dev-server配置：

devServer: {
    contentBase: "./",
    hostname: 'localhost',
    port: 9000,
    proxy: {
        '/rpc': {
            target: 'https://example.appspot.com',
            secure: false,
            changeOrigin: true     // **Update-2 SOLVED**
        }
    }
}

我使用 fetch : fetch('/rpc' ... 发送请求，并在 Windows 10 专业版上运行 webpack。

没有代理的情况下: fetch('https://example.com/rpc' ... SSL 请求正常工作。

更新。我不得不使用 SSL 端口 443（请参见 Steffen 的答案）。
现在使用：https://example.appspot.com:443

但仍然无法使用 secure: true。控制台日志显示：

cannot proxy to https://example.appspot.com:443 
(Hostname/IP doesn't match certificate's altnames: "Host: localhost. 
is not in the cert's altnames: DNS:*.appspot.com, DNS:*.thinkwithgoogle.com,
DNS:*.withgoogle.com, DNS:*.withyoutube.com, DNS:appspot.com,
DNS:thinkwithgoogle.com, DNS:withgoogle.com, DNS:withyoutube.com")

当使用 secure: false 时，控制台会报告：404（未找到）

更新：使用 changeOrigin: true 解决。文档在这里。

- voscausa

---

感谢changeOrigin: true解决方案！ - alecdwm

Answer 1

        target: 'https://example.com:80',

端口80用于HTTPS非常不太可能。通常使用的是端口443。

SSL23_GET_SERVER_HELLO:unknown protocol:openssl\ssl\s23_clnt.c:794:)

很可能是因为端口80的服务器没有回复HTTPS，而是由于客户端的消息是TLS握手的开始，而不是预期的HTTP请求，所以服务器返回了一些HTTP错误。但是客户端期望的是TLS握手的回复，而不是HTTP错误。这就是为什么会出现这个错误。

没有代理: fetch('https://example.com/rpc' ... SSL请求正常工作。

这是因为在这种情况下，您使用的是https://example.com而不是https://example.com:80。因为您没有给出明确的端口，所以它将使用https的默认端口，即443。

- Steffen Ullrich

---

是的，谢谢。还是不行。我已经更新了我的问题。 - voscausa

@voscausa：错误信息清楚地说明了问题所在：证书是针对 *.appspot.com, ... 的，但您正在使用名称 localhost 进行访问。由于您使用的名称与证书中的名称不匹配，因此无法验证证书。 - Steffen Ullrich

好的。再次感谢。我找到了一个选项可以更改原始内容，问题已解决。我已经将这个选项更新到我的问题中。 - voscausa

Answer 2

虽然我使用了正确的配置，包括changeOrigin: true等，但仍然遇到了301和选项请求，并且无法到达真正的后端服务器。直到我尝试清除浏览器缓存之后，它才能正常工作。

- mytharcher