刷新页面时出现连接握手失败和500错误 - 使用Angular和.Net Core的Abp Zero

Question

当我登录应用程序时，angular会将url更改为https://baseurl/app/home，主页能够正确地呈现。如果我刷新页面，就会出现服务器错误（500）。如果我在地址栏中删除“/app/home”并刷新，则页面可正常重新加载。

在服务器端的日志中，我发现以下内容：Fail: Microsoft.AspNetCore.SignalR.HubConnectionContext[5] Failed connection handshake. 我在两台不同的服务器上运行angular客户端和.net core应用程序，并且CORS已正确设置，客户端应用程序能够连接到API。除了刷新angular路由页面外，该应用程序运行良好。

当我在开发机器上本地运行应用程序时，问题不会发生。我没有更改原始Abp Zero模板中的任何路由或signalr相关代码。 服务器端： .NetCore 2.2

Abp Zero v4.8

在startup.cs文件中调用services.AddSignalR()和app.UseSignalR(routes => {routes.MapHub("/signalr");});方法。这些都是标准的模板代码。 在Angular客户端中： @aspnet/signalr v1.1.4

未更改的SignalRAspNetCoreHelper，其中在app.component.ts文件的OnInit中调用initSignalR()方法。

import { AppConsts } from '@shared/AppConsts';
import { UtilsService } from '@abp/utils/utils.service';

export class SignalRAspNetCoreHelper {
    static initSignalR(): void {

        const encryptedAuthToken = new UtilsService().getCookieValue(AppConsts.authorization.encrptedAuthTokenName);

        abp.signalr = {
            autoConnect: true,
            connect: undefined,
            hubs: undefined,
            qs: AppConsts.authorization.encrptedAuthTokenName + '=' + encodeURIComponent(encryptedAuthToken),
            remoteServiceBaseUrl: AppConsts.remoteServiceBaseUrl,
            startConnection: undefined,
            url: '/signalr'
        };

        jQuery.getScript(AppConsts.appBaseUrl + '/assets/abp/abp.signalr-client.js');
    }
}

app-routing.module.ts没有任何更改:

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { AppRouteGuard } from '@shared/auth/auth-route-guard';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
import { UsersComponent } from './users/users.component';
import { TenantsComponent } from './tenants/tenants.component';
import { RolesComponent } from 'app/roles/roles.component';
import { ChangePasswordComponent } from './users/change-password/change-password.component';

@NgModule({
    imports: [
        RouterModule.forChild([
            {
                path: '',
                component: AppComponent,
                children: [
                    { path: 'home', component: HomeComponent,  canActivate: [AppRouteGuard] },
                    { path: 'users', component: UsersComponent, data: { permission: 'Pages.Users' }, canActivate: [AppRouteGuard] },
                    { path: 'roles', component: RolesComponent, data: { permission: 'Pages.Roles' }, canActivate: [AppRouteGuard] },
                    { path: 'tenants', component: TenantsComponent, data: { permission: 'Pages.Tenants' }, canActivate: [AppRouteGuard] },
                    { path: 'about', component: AboutComponent },
                    { path: 'update-password', component: ChangePasswordComponent }
                ]
            }
        ])
    ],
    exports: [RouterModule]
})
export class AppRoutingModule { }

root-routing.module.ts（未更改）：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
    { path: '', redirectTo: '/app/home', pathMatch: 'full' },
    {
        path: 'account',
        loadChildren: 'account/account.module#AccountModule', // Lazy load account module
        data: { preload: true }
    },
    {
        path: 'app',
        loadChildren: 'app/app.module#AppModule', // Lazy load account module
        data: { preload: true }
    }
];

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule],
    providers: []

})
export class RootRoutingModule { }

有任何想法是出了什么问题吗？由于我没有更改任何内容，我想知道这个问题是否与环境或配置有关。

- Hagbourne

---

请展示您的SignalR和ASP.NET Core代码。 - Tony Ngo

@TonyNgo，我尝试更加明确一些。简而言之，我正在使用开箱即用的模板，所以我有点困惑为什么这不起作用。当我在本地主机上运行客户端和后端时，它可以正常工作，没有任何问题。 - Hagbourne

这里也有同样的问题。我尝试创建一个新的Angular和Dotnet Core项目，因为它已经运行了一段时间。发现问题在Angular方面。如果你找到了任何东西，请发布答案，我也会这样做。 - JustARandomProgrammer

Answer 1

如果有人偶然发现这个问题：

当我在我的开发机上本地运行应用程序时，问题不会出现。

问题与生产服务器有关，请求没有正确地转发到你的 Angular 应用程序

IIS

基本上，您需要安装 url-rewrite 然后为前端站点配置 web.config 文件，进行 web.config 配置 link 1 link 2

Apachi

link 1 link 2

- Modar Na