FE（前端）与BE（后端）通信异常排查求助

问题详情 #

服务器部署.NET Core后端，本地通过http server启动Angular项目，VPN连接至服务器网络。出现以下异常：

• 登录API请求成功，后续获取权限的API（http://10.7.2.242:5000/user/getPermission?page=/home）报错：

  ERROR Error: Uncaught (in promise): A : {"headers":{"normalizedNames":{},"lazyUpdate":null,"headers":{}},"status":0,"statusText":"Unknown Error","url":"http://10.7.2.242:5000/user/getPermission?page=/home","ok":false,"name":"HttpErrorResponse","message":"Http failure response for http://10.7.2.242:5000/user/getPermission?page=/home: 0 Unknown Error","error":{"isTrusted":true}}
  GET http://10.7.2.242:5000/user/getPermission?page=/home net::ERR_CONNECTION_RESET

• 跳过该API后，后续多个API出现相同错误，部分请求正常
• 后端无对应请求日志，但Postman/浏览器直接调用API正常
• 本地同时运行前后端、前后端部署在同一网络两台电脑均正常，排除CORS问题

相关代码 #

ConfigureServices 配置 #

services.AddCors(options => options.AddPolicy(name: MyAllowSpecificOrigins, builder =>
{
    var allowedOrigin = Configuration.GetSection("AllowedOrigin").Value;
    if (allowedOrigin == "*")
    {
        builder.AllowAnyOrigin().AllowAnyHeader().AllowAnyMethod();
    }
    else
    {
        var allowedOrigins = JsonConvert.DeserializeObject<string[]>(allowedOrigin);
        builder.WithOrigins(allowedOrigins).AllowAnyHeader().AllowAnyMethod();
    }
}));

Configure 配置 #

app.UseCors(MyAllowSpecificOrigins)

appsettings 配置 #

"AllowedHosts": "*",
"AllowedOrigin": "*",

排查与解决方案 #

1. 调整VPN与后端TCP连接超时设置
   登录请求成功但后续连接被重置，大概率是VPN的TCP连接复用策略或后端Kestrel超时设置导致。可以修改Kestrel的连接超时配置，在appsettings.json中添加：

   "Kestrel": {
     "Limits": {
       "KeepAliveTimeout": "00:02:00",
       "RequestHeadersTimeout": "00:01:00"
     }
   }
   

   同时在Angular请求中添加Connection: keep-alive头，保持连接活跃。

2. 检查请求头中的认证凭证
   登录成功后前端携带的Cookie/Token可能存在格式错误或失效情况，导致连接被提前断开。在浏览器开发者工具Network面板对比成功与失败请求的Cookie、Authorization字段，确认凭证是否正常。

3. 排查服务器防火墙/安全组
   虽然Postman能正常访问，但Angular请求的Origin头特征可能被服务器防火墙拦截。临时关闭防火墙测试，或在防火墙规则中添加允许本地前端IP的条目。

4. 修改Angular HTTP客户端配置
   禁用请求缓存并确保携带凭证（若使用Cookie认证）：

   import { HttpHeaders } from '@angular/common/http';
   
   // 在请求中添加配置
   const headers = new HttpHeaders({ 'Cache-Control': 'no-cache' });
   this.http.get('/user/getPermission', { headers, withCredentials: true });
   

5. 开启Kestrel详细日志
   提高后端日志级别，查看连接相关错误：

   "Logging": {
     "LogLevel": {
       "Microsoft.AspNetCore.Server.Kestrel": "Debug",
       "Microsoft.AspNetCore.Http.Connections": "Debug"
     }
   }
   

内容的提问来源于stack exchange，提问作者Andrea Palermo