如何使用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开发工具配置：

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

我用获取：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 (Not Found)

更新:使用changeOrigin: true解决问题。这里.

Answer 1

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

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

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

很可能端口80的服务器没有使用HTTPS进行应答，而是使用了一些HTTP错误，因为来自客户端的消息是TLS握手的开始，而不是预期的HTTP请求。但是客户端期望TLS握手的答复，而不是HTTP错误。这就是为什么你会犯这个错误。

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

这是因为在本例中使用的是https://example.com，而不是https://example.com:80。因为没有给出显式端口，所以它将使用https的默认端口，即443。

Answer 2

虽然我使用正确的配置与changeOrigin: true等，但仍然满足301和选项请求，并无法到达真正的后端服务器。在我尝试清理浏览器缓存之前，它是正确工作的。