ASP.NET Web API中Fetch方法调用缓慢且频繁触发Catch语句问题

1. 阻止表单默认提交行为（解决页面刷新中断请求问题） #

页面刷新导致请求中断是核心问题之一：点击按钮时表单默认提交行为未被阻止，fetch请求还没完成就触发页面跳转，直接中断请求，进而抛出"Failed to fetch"错误。

修复方式： #

• 若使用<form>包裹输入区域：
  • 将按钮的onclick改为onclick="return retrieveRegistrationData(event)"
  • 修改JS函数，接收event参数并阻止默认行为：

    async function retrieveRegistrationData(event) {
        // 优先阻止表单默认提交
        event.preventDefault();
        
        // 原有的表单验证、请求逻辑...
    }
    

• 或者直接将按钮类型从submit改为button：

  <button type="button" onclick="retrieveRegistrationData()">Register</button>
  

2. 修复后端IP地址获取的潜在异常 #

后端IP获取逻辑存在两个致命问题：

• Dns.GetHostEntry(Dns.GetHostName()).AddressList.ToString()不会返回实际IP，而是返回字符串System.Net.IPAddress[]，完全不符合业务预期。
• Dns.GetHostEntry可能在部分环境下抛出主机名解析异常，导致后端返回500错误，前端fetch捕获后触发catch块。

修复方式： #

如果需要获取客户端IP（注册场景更合理），通过请求上下文获取：

// 首先在控制器构造函数注入IHttpContextAccessor
private readonly IHttpContextAccessor _httpContextAccessor;
public UsersController(YourDbContext context, IHttpContextAccessor httpContextAccessor)
{
    _context = context;
    _httpContextAccessor = httpContextAccessor;
}

// 然后修改IP赋值逻辑
if (string.IsNullOrEmpty(user.IP_Address))
{
    var clientIp = _httpContextAccessor.HttpContext.Connection.RemoteIpAddress?.ToString();
    user.IP_Address = clientIp ?? "Unknown";
}

如果确实需要服务器IP，改为正确遍历数组的方式并添加异常处理：

if (string.IsNullOrEmpty(user.IP_Address))
{
    try
    {
        var hostEntry = Dns.GetHostEntry(Dns.GetHostName());
        // 优先取第一个IPv4地址
        var serverIp = hostEntry.AddressList.FirstOrDefault(ip => ip.AddressFamily == System.Net.Sockets.AddressFamily.InterNetwork)?.ToString();
        user.IP_Address = serverIp ?? "Unknown";
    }
    catch (Exception ex)
    {
        // 记录日志，避免IP获取失败导致注册流程中断
        user.IP_Address = "Unknown";
    }
}

3. 优化前端错误排查效率 #

在catch块中打印更详细的错误信息，配合浏览器开发者工具定位问题：

catch (error) {
    alert(`Error: ${error.message}`);
    console.error("Fetch error details:", error);
}

打开浏览器F12的Network标签，查看每次请求的状态码、响应内容，确认请求是否真的到达后端，以及后端返回了什么错误。

4. 后端添加日志定位异常 #

在PostUser方法中添加日志输出，确认请求到达情况及异常发生点：

private readonly ILogger<UsersController> _logger;
// 构造函数注入ILogger
public UsersController(YourDbContext context, ILogger<UsersController> logger)
{
    _context = context;
    _logger = logger;
}

[HttpPost]
public async Task<ActionResult<User>> PostUser(User user)
{
    _logger.LogInformation("Received registration request for username: {Username}", user.Username);
    try
    {
        var databaseUserName = await _context.Users.FirstOrDefaultAsync(u => u.Username == user.Username);
        var databaseUserEmail = await _context.Users.FirstOrDefaultAsync(u => u.Email == user.Email);
        
        if (databaseUserName != null) {
            _logger.LogWarning("Username {Username} already exists", user.Username);
            return BadRequest("Username already exists! Try another username.");
        }

        if (databaseUserEmail != null) {
            _logger.LogWarning("Email {Email} already exists", user.Email);
            return BadRequest("Email already exists! Try another email.");
        }

        // 修复后的IP获取逻辑...

        _context.Users.Add(user);
        await _context.SaveChangesAsync();
        _logger.LogInformation("User {Username} registered successfully", user.Username);
        return NoContent();
    }
    catch (Exception ex)
    {
        _logger.LogError(ex, "Error registering user {Username}", user.Username);
        return StatusCode(500, "Internal server error");
    }
}

5. 检查CORS配置（前后端端口不同时） #

如果前端页面和API运行在不同端口（比如前端用Live Server在5500，API在5000），需要在ASP.NET Core中配置CORS：

// 在Program.cs中添加
builder.Services.AddCors(options =>
{
    options.AddPolicy("AllowAll", policy =>
    {
        policy.AllowAnyOrigin()
              .AllowAnyMethod()
              .AllowAnyHeader();
    });
});

// 在app.UseRouting()之后添加
app.UseCors("AllowAll");

内容的提问来源于stack exchange，提问作者Alex Cetanas