Laravel SPA中Vue组件用axios发起GET请求返回页面文档而非JSON问题

Laravel 路由遵循先匹配先命中的匹配规则，默认配置下routes/web.php的路由加载优先级高于routes/api.php。你在web.php中定义的/{any}通配符路由未做路径排除，会捕获所有GET请求，包括你发起的/api/users接口请求，导致请求直接被该路由拦截返回SPA入口HTML，没有机会匹配到api.php中的用户接口路由。删除web路由后接口恢复正常，也印证了是通配符路由拦截的问题。

推荐优先使用路径排除的方案，对现有逻辑影响最小：

• 修改routes/web.php的通配符路由规则，通过正则排除api开头的请求：

Route::get('/{any}', function () {
   return view('layouts.vue');
})->where('any', '^(?!api).*$');

上述正则规则只会匹配所有非api开头的路径，/api/*前缀的请求会自动跳过web路由，匹配api.php中的接口规则。

如果需要进一步降低接口路径写错的概率，可以给axios设置全局接口前缀：

• 在Vue项目入口文件（通常为main.js）中添加配置：

import axios from 'axios'
axios.defaults.baseURL = '/api'

配置后组件内发起请求时可以省略/api前缀，直接写成：

axios.get('/users').then(...)

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