React中用Axios发POST请求出现net::ERR_EMPTY_RESPONSE错误排查

既然Swagger测试接口能正常返回200，后端接口本身大概率无问题，优先从前端Axios配置和请求细节入手排查：

1. 修正请求体格式 #

你的Axios请求将数据嵌套在了{data: this.state.medicalRecord}中，但ASP.NET接口大概率期望直接接收medicalRecord本身的结构（和你在Swagger里测试时传的格式一致）。尝试修改请求体为直接传数据：

axios.post(
  `http://localhost:5001/api/MedicalRecords/${this.state.patientID}/Appointments`,
  this.state.medicalRecord, // 移除外层的data包裹
  {
    headers: {
      'Content-Type': 'application/json'
    }
  }
).then(response => console.log(response)).catch(err => console.log(err))

2. 检查请求数据的序列化问题 #

如果this.state.medicalRecord里包含无法被JSON序列化的内容（比如循环引用、特殊对象类型如未处理的Date），会导致Axios发送的请求体格式异常，后端处理时可能无响应返回。可以先替换成固定的测试数据验证：

// 用接口能接收的简单数据测试
const testData = {
  // 填入符合接口要求的字段，比如：
  appointmentDate: "2024-05-20",
  description: "test appointment"
};

axios.post(
  `http://localhost:5001/api/MedicalRecords/${this.state.patientID}/Appointments`,
  testData,
  {
    headers: {
      'Content-Type': 'application/json'
    }
  }
).then(res => console.log(res)).catch(err => console.log(err))

3. 查看浏览器网络请求详情 #

打开浏览器开发者工具的Network面板，找到该POST请求，核对：

• Request Payload：确认实际发送的请求体和Swagger测试时的格式完全一致
• Request Headers：检查是否存在多余或错误的请求头（Axios默认会自动添加Content-Type: application/json，可以尝试手动移除该配置，让Axios自动处理）
• Response：确认后端是否真的没有返回任何内容，还是浏览器因某种原因拦截了响应

4. 排查跨域相关配置（若存在跨域场景） #

如果前端运行端口（比如React默认的3000）和后端5001端口不同，属于跨域请求。Swagger在后端域名下运行不会有跨域问题，但前端需要后端ASP.NET配置正确的CORS策略。虽然跨域通常会报CORS错误，但也可能因配置不全导致空响应，可确认后端是否允许前端域名的请求。

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