React+Laravel项目中Axios请求数据库返回HTML而非JSON问题

请求状态码200但返回HTML而非JSON，通常是路由配置、请求头或路由冲突导致的，以下是具体排查和解决步骤：

1. 修正Laravel路由配置 #

Laravel的web.php路由默认用于返回视图页面，api.php才是专门处理API请求的路由文件。如果你的控制器方法注册在web.php中，Laravel会优先返回视图而非JSON数据。

解决办法：
将API路由移至routes/api.php，示例：

// routes/api.php
use App\Http\Controllers\HandlerController;

Route::get('/login', [HandlerController::class, 'index']);

同时修改React中的请求地址，添加/api前缀：

await axios.get("/api/login")

2. 确保请求头包含Accept: application/json #

Laravel会根据请求的Accept头判断返回格式，若未明确指定接受JSON，会默认返回HTML。

解决办法：
全局配置Axios默认请求头（在React项目入口文件如App.js中添加）：

import axios from "axios";
axios.defaults.headers.common['Accept'] = 'application/json';

或在单个请求中单独指定：

const res = await axios.get("/api/login", {
  headers: { 'Accept': 'application/json' }
})

3. 排查路由冲突 #

如果/login路由同时在web.php中被用于返回登录视图（比如Route::get('/login', function () { return view('login'); })），会和API路由冲突，导致返回视图HTML。

解决办法：

• 给API路由设置独特前缀，比如改为/api/handlers，避免和视图路由重名；
• 或调整视图路由路径，比如改为/auth/login。

额外：修复React代码中的语法错误 #

你的React代码存在两处语法问题，会导致组件无法正常运行：

• e.preventDefault()直接写在组件函数内，应放在事件处理函数中；
• getAll函数未定义，需补充实现：

export default function Login(){
    const [account,setAccount]=useState({
        mail:"",
        password:"",
        surname:"",
        name:""
    })

    // 补充getAll函数
    const getAll = async (e) => {
        e.preventDefault()
        const res = await axios.get("/api/login")
        console.log(res)
    }

    // 补充checkAccount函数（若需要实现登录逻辑）
    const checkAccount = (e) => {
        e.preventDefault()
        // 登录逻辑代码
    }

    return(
        // 原有JSX代码保持不变
    );
}

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