如何使用 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-derver 配置：

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 professional to 运行 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。文档 here.

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 错误。这就是您收到此错误的原因。

Without the proxy : fetch('https://example.com/rpc' ... the SSL request works fine.

那是因为您在本例中使用 https://example.com 而不是 https://example.com:80。因为您没有提供明确的端口，所以它将使用 https 的默认端口，即 443。

Answer 2

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

如何使用 webpack-dev-server 代理代理到 ssl 端点

How can I proxy to a ssl endpoint with the webpack-dev-server proxy

javascript

ssl

proxy

webpack

webpack-dev-server