Vue-cli使用axios请求同目录PHP文件返回404错误问题求助

问题根本原因 #

• 你通过npm run serve启动的是Vue前端开发服务器，仅具备处理前端静态资源（js/css/html/图片等）的能力，不支持解析执行PHP代码，也不会把PHP文件作为接口响应
• 你认为的「同一目录」是源码文件的存放目录，和前端开发服务器的静态资源路由映射规则不匹配，直接请求./auth_register.php时前端服务找不到对应的响应资源，自然返回404。

现有代码的额外问题 #

就算后续配置了正确的PHP运行环境，你当前的PHP代码也无法正常返回响应：

• PHP中return仅用于函数内部返回值或者引入文件的返回，要给前端返回响应直接用echo而不是return
• 需要设置响应头指定返回JSON格式，否则前端会当成普通文本处理
  修正后的PHP代码示例：

<?php
header('Content-Type: application/json');
// 开发阶段可添加跨域头避免跨域报错
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: POST');

if (isset($_POST['nombre']) && isset($_POST['mail']) && isset($_POST['pass'])) {
    echo json_encode(["code" => 200, "msg" => "received"]);                                                         
} else {
    echo json_encode(["code" => 400, "msg" => "参数缺失"]);
}

具体解决步骤 #

1. 搭建PHP运行环境：可以用XAMPP、WAMP这类集成环境，启动Apache服务，把auth_register.php放到集成环境的web根目录下（比如XAMPP的htdocs目录）
2. 验证PHP接口可用性：启动Apache后访问http://localhost/auth_register.php确认不会返回404
3. 修改Vue请求地址：把axios请求的地址改成PHP服务的完整地址，示例：

axios.post("http://localhost/auth_register.php", formData)

4. （可选）开发阶段避免跨域可以配置vue代理，在项目根目录新建vue.config.js文件，添加如下配置：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost', // 替换为你的PHP服务实际地址
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

配置后请求可以写成axios.post("/api/auth_register.php", formData)，无需处理跨域问题。

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