Vue项目使用axios调用PHP接口返回源码而非正常数据如何解决

这个问题和前端Vue、axios的代码逻辑无关，核心是服务端没有对PHP文件做解析执行配置：

• PHP属于服务端脚本语言，必须搭配对应解析器（php-fpm、mod_php等）和Web容器（Apache、Nginx等）共同运行，才会返回代码执行后的结果
• 如果你直接双击打开本地HTML文件走file://协议访问，或者用纯静态文件服务器（比如vite开发服务、live-server等）运行项目，服务器会把.php后缀的文件当成普通文本资源直接返回源码，不会交给PHP解释器处理
• 即便你使用了Apache/Nginx服务，要是没有配置.php后缀和PHP处理器的关联规则，也会出现返回源码的问题

1. 本地开发优先使用PHP集成环境
   可以直接安装WAMP（Windows）、MAMP（macOS）、phpStudy等集成环境包，这类工具会自动配置好Web容器、PHP解析器、数据库的关联规则，不需要手动修改配置。
2. 调整项目运行方式
   把整个项目放到集成环境指定的站点根目录下（比如WAMP的www目录、phpStudy的WWW目录），通过http://localhost/你的项目目录的HTTP协议地址访问项目，禁止直接双击打开HTML文件走file://协议访问。
3. 单独验证PHP解析是否正常
   先直接在浏览器地址栏输入接口地址http://localhost/你的项目路径/inc/user.php，如果页面正常输出hi而非PHP源码，说明PHP解析配置正常，再测试前端axios请求即可。
4. 手动部署环境的额外配置
   如果你是自行搭建Nginx/Apache环境，需要单独配置PHP关联规则：

• Apache需要开启mod_php模块，添加AddHandler application/x-httpd-php .php配置关联.php后缀
• Nginx需要添加匹配.php文件的location规则，把请求转发到php-fpm进程处理

注意：该问题如果不修复直接上线到公网，会直接泄露数据库账号密码、业务逻辑等敏感信息，存在极高安全风险，修复完成前不要对外发布项目。

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