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

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

本文关键字：代理 ssl 端点 webpack-dev-server 何使用      更新时间：2023-09-26

当我尝试代理此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 config：

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 (Not Found)

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

        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。

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

相关文章：