React+C#后端Web应用：同网络用户无法访问后端的问题

1. 修改前端API请求地址 #

你当前前端的API_BASE_URL用了localhost，这会导致局域网内其他用户访问时，请求指向他们自己的本地机器，而非你的主机。

把API_BASE_URL替换成你的主机局域网IP地址，比如你的主机IP是192.168.1.100，则修改为：

const API_BASE_URL = "http://192.168.1.100:5161/api/";

可以通过在主机运行ipconfig命令查看局域网IPv4地址

2. 配置后端监听所有网络接口 #

默认情况下，.NET后端可能只监听localhost，需要让它监听所有可用的网络接口，才能接收局域网内的请求：

方法1：修改项目启动设置 #

在项目的Properties/launchSettings.json中，找到applicationUrl配置，把localhost改成0.0.0.0，示例：

"applicationUrl": "http://0.0.0.0:5161;https://0.0.0.0:5001"

方法2：在代码中配置Kestrel #

如果是.NET Core 3.x及以上，在Program.cs中添加Kestrel配置：

public static IHostBuilder CreateHostBuilder(string[] args) =>
    Host.CreateDefaultBuilder(args)
        .ConfigureWebHostDefaults(webBuilder =>
        {
            webBuilder.UseStartup<Startup>()
                      .UseKestrel(options =>
                      {
                          options.ListenAnyIP(5161); // 监听所有IP的5161端口
                      });
        });

3. 开放主机防火墙端口 #

Windows防火墙默认会阻止外部请求访问你的主机端口，需要手动开放5161端口：

• 打开「Windows Defender防火墙」→「高级设置」→「入站规则」→「新建规则」
• 选择「端口」→ 下一步，输入5161，选择「TCP」
• 下一步，选择「允许连接」
• 勾选「域」「专用」「公网」（根据你的网络环境调整）
• 为规则命名（比如「WebApp Port 5161」），完成创建

4. 确认后端API路由配置 #

确保你的API控制器正确使用了路由特性，比如：

[ApiController]
[Route("api/[controller]")]
public class YourController : ControllerBase
{
    // 接口方法示例
    [HttpGet]
    public IActionResult Get()
    {
        return Ok("Success");
    }
}

这样前端请求http://你的IP:5161/api/Your才能正确命中接口。

5. 测试连通性 #

让局域网内的用户先通过浏览器访问http://你的IP:5161/api/你的接口路径，确认能正常返回数据，再测试React应用。

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