Laravel+Vue(axios)接口返回HTML而非数据，请求排查原因

现象总结 #

调用/api/abc接口返回完整HTML代码，无法获取目标数据，Log::debug未执行，期望返回banana失败。

相关代码 #

RecipeController.php #

class RecipeController extends Controller
{
    public function abc()
    {
        $banana = 'banana';
        Log::debug('banana');
        return $apple;
    }
}

component.vue #

const abc = () => {
    return axios.get('/api/abc')
}

onMounted(async () => {
    const res3 = await abc()
    console.log(res3.data)
})

api.php #

Route::get('/abc', [RecipeController::class, 'abc']);

route.php #

Route::get('{any?}', function () {
    return view('welcome');
})->where('any', '.*');

原因解析 #

• 路由优先级冲突：Laravel的路由匹配按定义顺序执行，route.php中定义的通配路由{any?}规则为.*，会匹配所有GET请求（包括/api/abc），导致请求还没走到api.php的接口路由，就被拦截并返回welcome视图的HTML内容。这也是Log::debug未执行、控制器代码未运行的核心原因。
• 控制器变量错误：即便路由问题解决，当前控制器中定义了$banana = 'banana'，但返回的是未定义的$apple，会触发PHP的Undefined variable错误，导致接口返回500状态码。

修复方案 #

1. 调整路由匹配规则：修改route.php中的通配路由，排除API前缀的请求，避免拦截接口路由：

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

2. 修正控制器变量：将返回的变量改为已定义的$banana，如需返回JSON格式数据，可显式声明：

public function abc()
{
    $banana = 'banana';
    Log::debug('banana');
    return $banana;
    // 或返回JSON格式：return response()->json($banana);
}

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