使用React+Axios向Azure后端POST数据时遭遇502 Bad Gateway错误求助

问题描述 #

在React项目中使用Axios向Azure部署的数据库提交数据时，遇到Request failed with status code 502错误，已核对数据库关联命名规则无误，无法定位问题根源。

相关代码 #

const handleSubmit = (event) => {  
      event.preventDefault();  
      const updatedFormData = {  
        courseName: courseName,  
        endProgramDates: endDate,  
        endTime: endTime,  
        format: customFormat || selectedFormat,  
        registrationLink: registration,  
        source: source,  
        startProgramDates: startDate,  
        startTime: startime,
        targetAudience: selectedTA, 
      };  
      setFormData(updatedFormData);  
      const url = 'www.api.com';  
      console.log(formData)
      formData.map(response=>{
        console.log("456789e3iuhr37gryuj")
        console.log(response.data)
      })
      axios.post(url, formData)
        .then(response => {
            console.log(response.data);
        })
        .catch(error => {
            console.error(error);
      }); 
};

接口发送的数据格式 #

{
  "courseName": "React - Testing",
  "endProgramDates": "02-08-2024",
  "endTime": " 8:00 PM IST",
  "format": "VILT",
  "registrationLink": "www.google.com",
  "source": "live",
  "startProgramDates": "01-08-2024",
  "startTime": " 6:00 PM IST",
  "targetAudience": "Live"
}

排查思路 #

1. 先修复前端代码中的明显问题 #

• 解决状态更新异步问题：React的setFormData是异步操作，你在调用它后立刻使用formData发起请求，此时formData还是旧值，根本没用到刚组装的updatedFormData。直接用updatedFormData作为请求参数即可，无需先存入状态。
• 删除无效遍历代码：formData是单个对象而非数组，调用formData.map会直接报错，导致代码执行异常，请求可能无法正常发送，需删除这段无用代码。
• 修正接口URL格式：www.api.com缺少协议头（http://或https://），Axios会将其识别为相对路径，导致请求地址错误，这是引发502的高概率诱因。

2. 后端与Azure环境排查 #

• 确认API服务状态：502错误通常意味着前端到API网关/后端服务的转发失败，先检查Azure上的API服务是否正常运行，有无部署失败、重启异常等情况。
• 验证数据库连接：检查API服务到Azure数据库的连接是否正常，包括连接字符串正确性、数据库防火墙规则（是否允许API服务IP访问）、账号权限是否足够。
• 查看后端日志：在Azure的App Service或API Gateway中查看详细日志，502错误通常会附带具体原因，比如请求超时、后端服务崩溃、参数不合法导致后端报错等。
• 直接测试API接口：用Postman或curl直接调用目标API，传入你要发送的JSON数据，若直接调用也报错，说明问题出在后端；若调用正常，再回到前端排查请求头、参数格式等差异。

3. 请求细节校验 #

• 检查请求头配置：Axios默认Content-Type为application/json，确认后端是否接受该格式，是否需要添加认证token等额外请求头。
• 校验参数格式：核对参数值的格式是否符合后端要求，比如日期是否需要转为YYYY-MM-DD的ISO格式，时间字段的多余空格（如你发送的endTime和startTime开头的空格）是否会导致后端解析失败。
• 排查网络环境：本地开发时，检查是否能正常访问Azure的API服务，有无代理、VPN或本地防火墙拦截请求。

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