Vue3使用Axios调用本地PHP接口返回502 Bad Gateway错误

502属于网关层错误，本质是本地Web服务（Nginx/Apache）和PHP解析进程通信失败，和前端业务逻辑、PHP业务代码的语法错误不属于同一类问题，按以下顺序排查修复即可：

1. 先验证本地PHP运行环境是否正常 #

• 在/api/auth/目录下新建测试文件test.php，写入如下内容：

<?php echo "php service run ok"; ?>

• 浏览器直接访问该文件对应的本地地址，根据返回结果判断：
  • 访问直接报502：说明Web服务和PHP进程通信异常，常见原因是PHP服务未启动、Nginx/Apache中配置的PHP端口/套接字地址和实际运行的PHP服务不匹配、集成环境进程假死，直接重启PHP服务和Web服务即可，用集成环境（phpStudy、XAMPP等）的直接重启全套服务。
  • 能正常输出php service run ok：说明环境通信正常，进入下一步修正代码问题。

2. 修正现有代码的问题 #

你当前的前后端代码存在几个容易触发异常的点，按如下修改即可实现「原样返回表单提交数据」的需求：

前端Axios代码调整 #

Axios默认POST提交application/json格式数据，先确认环境变量配置的请求地址正确，跨域场景下提前配置好本地开发代理：

submitForm(){
  // 调试阶段先打印确认请求地址拼接正确
  console.log('request url:', process.env.VUE_APP_BASEURL+'/api/auth/signinout.php')
  axios.post(process.env.VUE_APP_BASEURL+'/api/auth/signinout.php', {
    usern: this.usern,
    passw: this.passw
  }, {
    headers: {
      'Content-Type': 'application/json'
    }
  })
  .then(res=> {
    console.log(res.data);
  })
  .catch((error) => {
    console.log(error);
  })
}

PHP接口代码调整 #

原代码手动拼接JSON的方式极易出现格式错误，注释里的$_POST{"usern"]存在语法错误（大括号、中括号混用），改成用PHP内置JSON函数处理输入输出即可：

<?php
// 调试阶段打开错误显示，排查完成后可关闭
ini_set("display_errors", 1);
error_reporting(E_ALL);
header('Content-type: application/json');
// 获取原始POST请求体
$rawInput = file_get_contents('php://input');
// 校验输入是否为合法JSON格式
$parsedInput = json_decode($rawInput, true);
if (json_last_error() !== JSON_ERROR_NONE) {
  // 非JSON格式直接返回原始输入
  echo json_encode([
    'messages' => [$rawInput]
  ], JSON_UNESCAPED_UNICODE);
  exit;
}
// 原样返回解析后的提交数据
echo json_encode([
  'messages' => [$parsedInput]
], JSON_UNESCAPED_UNICODE);
?>

3. 最终验证 #

• 先通过Postman/curl直接请求PHP接口地址，传入测试参数，确认接口可以正常返回JSON结果、无502/500错误
• 接口本身验证通过后，再从前端页面发起请求，如果仍报502，检查前端本地开发服务的代理配置，确认代理转发的目标地址和本地PHP服务的监听端口一致，没有转发到无效地址。

小提示：本地开发场景下90%的偶发502都是PHP进程假死导致的，遇到问题优先重启服务再排查代码。

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