Azure部署React SPA调用API取Azure SQL数据报ERR_CONNECTION_REFUSED

问题背景 #

• 托管环境：Azure平台，运行基于ASP.NET Core 5.0.17的React单页应用
• 现有配置：业务数据库已部署至Azure SQL，Web应用连接字符串已调整为匹配Azure SQL的配置
• 故障现象：React前端无法正常获取API数据，已确认的事实如下：
  • 前端控制台抛出Failed to load resource: net::ERR_CONNECTION_REFUSED错误
  • 内置WeatherForecastController接口可正常返回硬编码数组数据
  • 前端.env文件中配置的Fetch API请求目标地址为https://onboarding2.azurewebsites.net/api/customers
  • 用Postman直接调用上述customers接口可正常返回数据

排查方向与对应解决方案 #

1. 验证前端环境变量是否正确生效 #

React构建时只会注入以REACT_APP_为前缀的环境变量，修改变量后未重新构建也会导致配置不生效

• 排查步骤：
  打开浏览器开发者工具的「网络」面板，定位失败的customers请求，查看实际发起请求的目标URL，确认是否和配置的线上地址一致；也可以直接检索打包后的前端静态JS文件，搜索接口地址关键字，确认注入的配置值正确。
• 常见问题与修复：
  • 若变量名不符合规范：将.env中存储接口地址的变量名修改为REACT_APP_API_BASE这类符合命名规则的格式，代码中通过process.env.REACT_APP_API_BASE读取地址，不要使用自定义无前缀的变量名。
  • 若修改变量后未重新构建：本地调试需重启开发服务，部署到Azure需触发全量重新部署——客户端渲染的React项目环境变量是构建时注入的，运行时修改Azure应用配置不会生效，必须重新打包静态资源。

2. 检查ASP.NET Core CORS跨域配置 #

Postman不受浏览器同源策略限制，可正常调用接口不代表跨域配置正确；部分浏览器拦截跨域请求时不会明确提示跨域错误，会直接抛出连接类异常

• 排查步骤：
  查看浏览器控制台完整报错，确认是否存在Access-Control-Allow-Origin相关的跨域拦截提示。
• 配置修复：
  在ASP.NET Core 5的Startup.cs文件中按正确顺序注册CORS服务，参考代码如下：

  public void ConfigureServices(IServiceCollection services)
  {
      // 注册CORS策略
      services.AddCors(options =>
      {
          options.AddPolicy("AllowFrontend",
              builder =>
              {
                  builder.WithOrigins("https://onboarding2.azurewebsites.net")
                         .AllowAnyHeader()
                         .AllowAnyMethod();
              });
      });
      services.AddControllers();
      // 其余服务配置
  }
  
  public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
  {
      // 其余中间件配置
      app.UseRouting();
      // 注意：CORS中间件必须放在UseRouting之后、UseAuthorization/UseEndpoints之前，否则配置不生效
      app.UseCors("AllowFrontend");
      app.UseAuthorization();
      app.UseEndpoints(endpoints =>
      {
          endpoints.MapControllers();
      });
  }
  

  生产环境禁止使用AllowAnyOrigin()搭配AllowCredentials()，会触发浏览器安全拦截。

3. 校验接口路由与Azure平台配置 #

• 排查步骤：
  直接在浏览器地址栏输入https://onboarding2.azurewebsites.net/api/customers访问，若能正常返回数据则排除接口本身和平台网络问题，回到前两个排查点；若访问失败则依次检查以下配置：
  • 确认CustomersController的路由配置正确，Controller层需标注[ApiController]与[Route("api/[controller]")]特性，保证路径匹配
  • 进入Azure应用服务「配置-常规设置」页，确认「HTTPS Only」为开启状态，前端配置的接口地址统一使用HTTPS协议，不要混用HTTP触发强制跳转拦截
  • 进入Azure应用服务「网络」页，检查是否配置了IP访问规则，拦截了正常的用户请求

4. 排查前端请求硬编码问题 #

• 排查步骤：
  全局检索前端代码中的localhost、127.0.0.1关键字，确认是否存在硬编码的本地开发接口地址，或环境判断逻辑错误导致线上环境请求了本地地址。
• 修复方案：将所有硬编码的接口地址替换为从环境变量读取的统一配置，避免多环境地址混乱。

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