React前端net::ERR_CONNECTION_REFUSED错误排查求助

1. 修正前端API请求地址（最可能的原因） #

你本地开发时用的是http://localhost:5000/api/login，但部署到Azure后，后端已经有了专属的云服务地址，前端代码里肯定还硬编码着localhost地址，这是导致连接被拒绝的核心原因。

• 操作：把前端fetch请求里的基础URL替换成Azure后端的实际访问地址（比如https://your-api-service-name.azurewebsites.net），重新打包并部署前端。
• 示例代码修改：

  // 原来的本地请求
  fetch('http://localhost:5000/api/login', { /* 配置 */ })
  // 修改为Azure后端地址
  fetch('https://your-api.azurewebsites.net/api/login', { /* 配置 */ })
  

2. 确认Azure后端的CORS配置完全生效 #

别只看代码里的CORS设置，一定要检查Azure Portal里的App Service CORS配置：

• 登录Azure Portal，找到你的后端App Service，进入CORS选项卡
• 要么直接添加*（允许所有源访问），要么明确添加前端Azure托管的完整URL（比如https://your-frontend-static-app.azurestaticapps.net）
• 注意：代码里的CORS配置（比如ASP.NET的AddCors）要和Portal配置兼容，不要出现冲突（比如代码允许所有，但Portal只加了特定源，以Portal配置为准）。

3. 移除后端代码里的硬编码端口 #

Azure App Service运行ASP.NET API时，会自动使用环境变量指定的端口，不需要你硬编码http://localhost:5000：

• 检查后端代码里的启动配置，确保没有强制指定localhost:5000，让ASP.NET自动适配Azure的运行环境。
• launchSettings.json只用于本地开发，部署到Azure后不会生效，所以不用修改这个文件来适配云环境。

4. 直接验证后端API的可访问性 #

虽然Swagger页面能打开，但要确认API接口本身能正常访问：

• 在浏览器或Postman里直接请求Azure后端的API接口，比如https://your-api.azurewebsites.net/api/login（GET方法测试，POST方法用Postman模拟请求）
• 如果返回404或错误，说明后端接口部署有问题，可能是路由配置错误，或者发布时遗漏了必要文件。

5. 检查Azure网络访问限制 #

• 进入后端App Service的网络选项卡，查看“访问限制”是否设置了IP白名单，如果有，要么添加前端服务的IP，要么暂时移除限制测试。
• 如果你用Azure Static Web Apps托管前端，默认出站网络是允许访问公共资源的，但如果后端配置了VNet集成，需要额外配置网络规则允许前端访问。

6. 清除前端缓存 #

有时候前端部署后，浏览器缓存了旧代码（还是用localhost地址）：

• 按Ctrl+Shift+R强制刷新前端页面，或者手动清除浏览器缓存
• 后续部署前端时，可以开启缓存破环（比如打包时给静态文件加哈希后缀），避免旧代码被缓存。

额外说明：React前端不需要配置CORS，CORS是后端和服务器层面的配置，前端不用处理这部分。

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