如何配置 Blazor 以在 HTTP 和 WebSocket 连接中使用不同的基本 URL?

huangapple go评论66阅读模式
英文:

How can I configure Blazor to use different base URLs for HTTP and WebSocket connections?

问题

I have a Blazor-Server app running on a corporate intranet, and user's Browsers are connecting to server through our standard web-app portal which does few things, such as providing a friendly URL and takes care of the SSO, failover... Unfortunately this web portal has some limitation on WebSocket messaging, limiting the payload to 64kb, which is breaking the SignalR communication as it happens to have the server sending few hundreds kb or even few Mb messages to the browser when the page contains a lot of data (like a big grid). It's working totally fine when I connect directly but I'm losing the SSO, which is a big loss in terms of user experience.

So here is my question: how can I continue to use the portal with a friendly CNAME for HTTP and tell Blazor to use the real Hostname for the WebSocket, for example:

  • HTTP => http://myportal/myapp/home
  • WebSocket => ws://server1234:6400/_blazor

I saw some JS code like below to allow changing the path, but I didn't find how to map the base URL...

<script>
    (function start() {
        Blazor.start({
            configureSignalR: builder => builder.withUrl("/_barfoo")
        });
    })()
</script>

=== [Edit] Full solution based on Jason's answer ===

Browser code

// in _layout.cshtml
<script>
    (function start() {
        var signalUrl = 'http://server1234:6400/_blazor';
        Blazor.start({
            configureSignalR: builder => builder.withUrl(signalUrl)
        });
    })()
</script>

Server Code for CORS

// in Program.cs
builder.services.AddCors(options =>
{
    
    options.AddPolicy("SigRPolicy", builder =>
        builder.WithOrigins("http://server1234")
               .AllowAnyMethod()
               .AllowAnyHeader())
               .SetIsOriginAllowed(_ => true);

    // !! After app.UseRoutine (order matters)
    app.UseCors("SigRPolicy");
    // !!  before app.UseAuthentication

});

But now I need to dynamically retrieve hostname:port with an API call.

英文:

I have a Blazor-Server app running on a corporate intranet, and user's Browsers are connecting to server through our standard web-app portal which does few things, such as providing a friendly URL and takes care of the SSO, failover... Unfortunately this web portal has some limitation on WebSocket messaging, limiting the payload to 64kb, which is breaking the SignalR communication as it happen to have the the server sending few hundreds kb or even few Mb messages to browser when the page contains a lot of data (like big grid).
It's working totally fine when I connect directly but I'm loosing the SSO which is a big loss in term of user experience.

So here is my question : how can I continue to use the portal with friendly CNAME for HTTP and tell Blazor to use the real Hostname for the WebSocket, ex :

  • HTTP => http://myportal/myapp/home
  • WebSocket ws://server1234:6400/_blazor

I saw some JS code like below to allow to change the path, but didn't find how to map the base url...

&lt;script&gt;
    (function start() {
        Blazor.start({
            configureSignalR: builder =&gt; builder.withUrl(&quot;/_barfoo&quot;)
        });
    })()
&lt;/script&gt;

=== [Edit] Full solution based on Jason answer ===

Browser code

// in _layout.cshtml
&lt;script&gt;
    (function start() {
        var signalUrl = &#39;http://server1234:6400/_blazor&#39;
        Blazor.start({
            configureSignalR: builder =&gt; builder.withUrl(signalUrl)
        });
    })()
&lt;/script&gt;

Server Code for CORS

// in Program.cs
builder.services.AddCors(options =&gt;
{
    
    options.AddPolicy(&quot;SigRPolicy&quot;, builder =&gt;
        builder.WithOrigin(&quot;http://server1234&quot;)
               .AllowAnyMethod()
               .AllowAnyHeader())
               .SetIsOriginAllowed(_ =&gt; true);

    // !! After app.UseRoutine (order matters)
    app.UseCors(&quot;SigRPolicy&quot;)
    // !!  before app.UseAuthentication

});

But now I need to dynamically retrieve hostname:port with api call

答案1

得分: 1

你可以尝试将以下代码放入 _Host.cshtml 文件中:

<script>
    (function start() {
        var hostname = window.location.hostname;  // 获取主机名

        var signalRUrl = 'ws://' + hostname + ':6400/_blazor'; 

        Blazor.start({
            configureSignalR: builder => builder.withUrl(signalRUrl)
        });
    })();
</script>

我们需要确保在你的服务器上可以访问端口 6400。

英文:

You can try to using below code inside _Host.cshtml file.

&lt;script&gt;
    (function start() {
        var hostname = window.location.hostname;  // Get the hostname

        var signalRUrl = &#39;ws://&#39; + hostname + &#39;:6400/_blazor&#39;; 

        Blazor.start({
            configureSignalR: builder =&gt; builder.withUrl(signalRUrl)
        });
    })();
&lt;/script&gt;

We need to make sure the 6400 port can be accessed in your server.

huangapple
  • 本文由 发表于 2023年5月21日 22:31:57
  • 转载请务必保留本文链接:https://go.coder-hub.com/76300405.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定