Chrome UI中401响应体为空但Postman正常的原因求助

1. 检查CloudFront错误响应配置 #

CloudFront可能拦截并替换API Gateway返回的错误响应，导致前端拿不到自定义内容：

• 登录CloudFront控制台，找到目标分发，进入错误页面设置
• 针对401等状态码，设置为自定义错误响应，勾选转发请求到原点，包括请求主体
• 确认HTTP响应代码与API Gateway返回的状态码一致，不要替换为其他码

2. 验证API Gateway的CORS配置 #

跨域场景下，Chrome的预检请求若未得到正确响应，会屏蔽错误响应体：

• 在API Gateway对应阶段的CORS设置中，确保Access-Control-Allow-Origin配置正确（带Credentials时不能用*），同时添加Access-Control-Expose-Headers，将自定义响应用到的头字段纳入其中
• 检查Gateway Responses里的401响应，是否配置了Access-Control-Allow-Origin、Access-Control-Allow-Credentials等CORS头

3. 调整Axios错误捕获逻辑 #

浏览器跨域限制可能导致无法直接读取响应体，可通过以下方式处理：

• 不要仅依赖error.response.data，先打印完整error对象，确认error.response是否存在
• 若响应体被限制，可在API Gateway的Lambda集成中，将错误信息通过自定义头（如X-Error-Message）返回，前端读取error.response.headers['x-error-message']获取内容
• 示例Axios拦截器代码：

axios.interceptors.response.use(
  response => response,
  error => {
    const errorMsg = error.response?.data?.message || error.response?.headers['x-error-message'] || '请求失败';
    console.error(errorMsg);
    return Promise.reject(new Error(errorMsg));
  }
);

4. 确认API Gateway的Gateway Responses配置细节 #

确保自定义响应模板正确生效：

• 在API Gateway的Gateway Responses中找到UNAUTHORIZED（对应401），确认Response Templates里配置了对应Content-Type的模板，比如application/json模板：

{
  "message": "$context.error.message",
  "code": "$context.error.responseType"
}

• 保存配置后重新部署API Gateway阶段，确保配置生效

5. 查看Chrome网络请求详情 #

打开Chrome开发者工具网络面板，查看401请求的响应标签：

• 若响应体为空，说明上游（CloudFront/API Gateway）未返回内容，需排查上游配置
• 若响应体存在但Axios无法读取，大概率是CORS配置缺失，补充Access-Control-Expose-Headers即可

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