Apache服务器部署Laravel应用后Vue组件报Network Error如何解决

问题根因 #

• 你在filterSpec方法中硬编码了本地开发环境的请求地址http://127.0.0.1:8000，部署到Apache服务器后，用户访问站点用的是线上服务器域名/IP，前端请求仍然发送到本地127.0.0.1:8000自然会触发网络错误。
• 额外语法问题：filterSpec方法中使用了await关键字，但方法未声明async，存在语法错误。

解决方案 #

1. 替换硬编码的请求地址
   将axios请求的地址修改为相对路径，自动适配当前访问的站点域名：

// 原代码
.get("http://127.0.0.1:8000/api/doctors?specialization=" + this.specId)
// 修改后
.get("/api/doctors?specialization=" + this.specId)

2. 修复异步语法错误
   给filterSpec方法添加async声明：

// 原代码
filterSpec: function () {
// 修改后
filterSpec: async function () {

3. 可选优化（推荐）
   你可以在项目入口resources/js/app.js中统一配置axios的基础前缀，避免后续每个请求都写路径前缀：

axios.defaults.baseURL = window.location.origin + '/api';
// 之后所有接口请求可以直接写相对路径，比如：
axios.get('/doctors?specialization=' + this.specId)

4. Apache配置检查
   确保Apache开启了mod_rewrite模块，且Laravel项目public目录下的.htaccess文件正常存在，保证/api开头的请求能正常被Laravel路由解析。

修改完成后重新编译前端资源：
npm run build
清空Laravel缓存即可生效。

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