cloudflare 后面的 blazor 服务器应用程序无法运行

Nic*_*ing 3 cloudflare blazor

我有一个 Blazor 服务器应用程序无法在 Cloudflare 隧道后面工作。

如果我直接访问,它可以工作,但是当我点击 Cloudflare Tunnel 地址时,它会失败。

看起来通过 WebSocket 的初始握手已损坏,即StartCircuit缺少通过直接请求出现在请求中的信息。

代理与直接之间的区别

关于如何调试这个有什么想法吗?它使用 SignalR HubConnection。

Nic*_*ing 6

找到了答案。

Blazor 应用程序需要 HTML 注释才能运行



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <base href="/" />
    <script src="/cdn-cgi/apps/head/thZWnQCN16sHq_42os2XW0EExu8.js"></script><link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
    <link href="css/site.css" rel="stylesheet" />
    <link href="PingFederateQRCodeServerApp.styles.css" rel="stylesheet" />
    <!--Blazor:{"sequence":1,"type":"server","prerenderId":"dac57b7fd29a4dc0997578f6de244c6e","descriptor":"CfDJ8FCq4mQfyOtBrSDQWGdsOj3JMykyrogaV/s5O64KvmFQqzlBM1067RhYMFqoFLxiOb7GdEbjCLC24MHRh96QN5/b1hC0wlt6jBVYOoSl/0OiHFzCfGn0n6xVwetlMFonG3YsbX7MbUmId/R\u002Bw5KhBOnh9JjuEDlFGqd5FC5P/vPNrcJpPcZCHrGIV1Y1md4DBeF/YvRUsL8Go3w6jeOXN74prUpdph/qotpqGFFPDCQ4no2qpJmMhCneYCZ4suNBiV6HZ7k4DVcIlWbXaXggkrCVufLT1PsoWvmTJeT2INFA/SIPt9OoDax3ntl9e1o7EvGhom3AfYTaK3fBwRpAGuW/2g9EcErL91APe1QXLiBwkPXDx4hyI1oyeDRg2XqKll3Cj5ZU2X2bWGj60vlaRM2C7d\u002BXFHg79sXPscFwUu\u002BV"}--><title>jump</title><!--Blazor:{"prerenderId":"dac57b7fd29a4dc0997578f6de244c6e"}-->
</head>
<body>
    
<!--Blazor:{"sequence":0,"type":"server","prerenderId":"2dbb2417de4a4b248a149cfceb4a155c","descriptor":"CfDJ8FCq4mQfyOtBrSDQWGdsOj15yvMSoGErc95NwnTuzW4HlcvfrJhlL9qWfJntIqWA90x0DyGB1qo9nPizFy4PhZSEeXjiw27n/wDDGF8DbaLIVYm1qbS0JsTjNaF8Uh8/qNJad2C7xfdWsfAC9nkOLM\u002BKz8/yJ2DdG663yaNnG7cYcc9Oxw8j2WXMdLT5BXJFHf/I5x1eYCsMs9jjhjUx0jOZFknFSpqEgBOJARAtdg\u002BkcZUM2UsIkRrk1qIJv18V07KGFVQB8S1jo5wvoN3zqldxG5WKEL3qsxg\u002B/00di9ebu0pZ2Jucqtx4aM7jEUri8FoP1wccoevzsivodSVOHKGf76ZgYdUrIJU6lb7HhmHvlJHrA91LOr0e9cuFU/paYyto2BxYROuf3wbU2pNRmoc="}-->


<div id="center-screen"><div id="auth"><h1>QR Code Authenticator</h1>
        <div id="qrcode"><form method="post" action="/qrcode"><input type="hidden" name="item1" value="Item 1">
                <input type="hidden" name="item2" value="Item 2">
                <input type="hidden" name="item3" value="Item 3">
                <input type="hidden" name="item4" value="Item 4">
                <input type="submit"></form></div></div></div>
        <!--Blazor:{"prerenderId":"2dbb2417de4a4b248a149cfceb4a155c"}-->
<!--Blazor-Component-State:CfDJ8FCq4mQfyOtBrSDQWGdsOj2CG2AsSC/sSLM4ryUrWBhvX8zymekbGQ80dwIs/DWAH/2MwAPisdUM57xGAwkctpKa2b/YocXN9BpdDwZ6LzIfF4mvmXmE2OU5BiZNdFXIhQ==-->


    <div id="blazor-error-ui">
        
            An error has occurred. This application may no longer respond until reloaded.
        
        
        <a href="" class="reload">Reload</a>
        <a class="dismiss"></a>
    </div>
    <script src="_framework/blazor.server.js" type="a88fb38cd477c1ed54c73f3d-text/javascript"></script>
    <script src="_content/BlazorZXingJs/zxingjs-0.18.2/umd/index.min.js" type="a88fb38cd477c1ed54c73f3d-text/javascript"></script>
<script src="/cdn-cgi/scripts/7d0fa10a/cloudflare-static/rocket-loader.min.js" data-cf-settings="a88fb38cd477c1ed54c73f3d-|49" defer=""></script></body>
</html>
Run Code Online (Sandbox Code Playgroud)

如果没有,则无法启动 WebSocket 来继续应用程序。

默认情况下,当您通过 CloudFlare 进行代理时,它会缩小 HTML 以及 CSS / JS,并在此过程中删除注释,从而禁用 WebSocket。

您需要创建一个页面规则,以免缩小 Blazor 应用程序的 HTML。 图片|690x76 完成后,WebSocket 会正常工作,并且您会显示 Blazor 应用程序。 qrcodeauth|396x500

这已经是几周的痛苦了,因为我一直在寻找错误的地方。