使用Axios请求PHP接口后alert弹出undefined问题排查求助

1. 前端字符串语法错误 #

你的JS代码中alert的字符串存在语法问题：普通双引号字符串不能直接换行，这会导致JS解析错误，进而影响后续逻辑执行。

修正方式：

• 使用转义换行符\n：

alert("Successfully enrolled.\nPress ok to go back");

• 或者使用ES6模板字符串（反引号包裹）：

alert(`Successfully enrolled.
Press ok to go back`);

2. 手动设置Content-Type导致的问题 #

当使用axios发送FormData时，axios会自动设置正确的Content-Type（包含boundary分隔符），手动设置'Content-Type': 'multipart/form-data'会丢失boundary，导致后端无法正确解析表单数据，可能造成$bal变量未正确赋值，最终返回的JSON数据不符合预期。

修正方式：
移除手动设置的headers配置：

axios.post(url, formData)
  .then(function(res) {
    // ... 后续逻辑
  })
  .catch(function(error) {
    alert("error");
  })

3. 后端未设置JSON响应头 #

后端返回JSON时，未明确设置Content-Type: application/json响应头，axios可能无法自动将响应解析为JSON对象，导致res.data是原始字符串，访问res.data.message就会得到undefined。

修正方式：
在echo json_encode($response);前添加响应头：

header('Content-Type: application/json');
$response = array();
if($bal>=2500){
  $response['success'] = true;
  $response['message'] = 'All ok';
} else{
  $response['success'] = false;
  $response['message'] = 'insufficient balance';
}
echo json_encode($response);

4. 后端$bal变量未正确赋值 #

检查$bal是否从前端表单数据中正确获取，比如如果前端FormData中传递的字段名为balance，后端需要通过$_POST['balance']（或对应方式）赋值给$bal，否则$bal可能为null或未定义，导致逻辑判断异常。

排查方式：
在后端代码中添加调试输出，确认$bal的值：

var_dump($bal); // 检查$bal是否有正确的值

5. 调试建议 #

在前端then回调中先打印响应数据，确认后端返回的内容是否符合预期：

.then(function(res) {
  console.log(res.data); // 查看实际返回的JSON数据
  if (res.data.success === true) {
    alert("Successfully enrolled.\nPress ok to go back");
  } else {
    alert(res.data.message || "Unknown error");
  }
})

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