Reactjs从本地网络外访问ASP.NET Core后端获取数据失败如何解决

基础前提修复 #

当前仅配置了前端80端口的ngrok转发，后端5000端口未对外暴露，是公网环境无法拉取接口的直接原因，可二选一处理：

• 额外配置一条ngrok转发规则，把本地5000端口映射到公网，获取后端的公网访问地址
• （更推荐）利用托管前端的IIS配置反向代理规则，将所有/api前缀的请求转发到本地127.0.0.1:5000，无需额外暴露后端端口，公网请求走前端80端口统一接入，安全性更高

前端多场景适配配置 #

方案1（零环境适配，优先级最高） #

所有fetch请求统一使用相对路径，不需要拼接任何IP、域名或端口，例如后端接口路径为/api/getList，前端直接写fetch('/api/getList')即可。
配合IIS反向代理规则后，不管是本地单机、局域网还是公网环境，请求会自动匹配当前访问前端的域名/IP，自动转发到后端，无需修改任何配置即可适配三个场景。

方案2（环境变量区分方案） #

如果不使用反向代理，可通过React环境变量区分不同场景的接口地址：

1. 在React项目的环境配置文件中定义基础地址变量：
   • 本地开发环境：REACT_APP_API_BASE_URL=http://localhost:5000
   • 局域网部署环境：REACT_APP_API_BASE_URL=http://局域网IP:5000
   • 公网部署环境：REACT_APP_API_BASE_URL=http://ngrok分配的后端公网地址
2. 发起请求时统一引用变量：fetch(${process.env.REACT_APP_API_BASE_URL}/api/xxx)
3. 需额外在ASP.NET Core中配置CORS规则，允许三个场景的前端地址跨域访问。

ASP.NET Core配置校验 #

• 确认服务监听所有网卡的请求，不要仅绑定localhost，在Program.cs中添加如下配置：

builder.WebHost.UseUrls("http://0.0.0.0:5000");

• 测试阶段可临时配置允许所有跨域请求，方便排查问题：

// 注册CORS服务
builder.Services.AddCors(options =>
{
    options.AddPolicy("DevAllow", policy =>
    {
        policy.AllowAnyOrigin()
              .AllowAnyMethod()
              .AllowAnyHeader();
    });
});

// 中间件配置，注意放在UseRouting之后、UseAuthorization之前
app.UseCors("DevAllow");

内容的提问来源于stack exchange，提问作者Rowin ten Hoope