web-dev-qa-db-ja.com

webpack-dev-serverプロキシを使用してSSLエンドポイントにプロキシするにはどうすればよいですか？

この_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 10Professionalを使用してwebpackを実行します。

プロキシがない場合：_fetch('https://example.com/rpc' ..._ SSL要求は正常に機能します。

更新。 SSLポート443を使用する必要がありました（Steffenの回答を参照）。
現在使用中： https://example.appspot.com:44

しかし、それでも_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_を使用してSOLVED。ドキュメント ここ 。

javascriptsslproxywebpackwebpack-dev-server
16
voscausa
        target: 'https://example.com:80',

ポート80がHTTPSに使用される可能性はほとんどありません。通常、ポート443が使用されます

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

クライアントからのメッセージがTLSハンドシェイクの開始であり、予期されたHTTP要求ではなかったため、ポート80のサーバーがHTTPSで応答しなかったが、HTTPエラーで応答した可能性が非常に高いです。しかし、クライアントは、HTTPエラーではなく、TLSハンドシェイクへの応答を期待していました。そのため、このエラーが発生します。

プロキシなし：fetch（ ' https://example.com/rpc ' ... SSLリクエストは正常に機能します。

これは、この場合、https://example.comではなくhttps://example.com:80を使用するためです。明示的なポートを指定しないため、httpsのデフォルトポート（443）が使用されます。

4
Steffen Ullrich

changeOrigin: trueなどで正しい構成を使用していますが、301とオプションの要求を満たし、実際のバックエンドサーバーに到達できません。 ブラウザのキャッシュをクリーンアップするを試みるまでは、正しく機能します。

0
mytharcher