Vue.js对接Laravel API登录遇405 Method Not Allowed错误求助

问题概述 #

Vue.js 应用通过 API 与 Laravel 后端进行用户认证时，触发登录请求后收到405 Method Not Allowed错误，服务器返回响应内容为“Method Not Allowed”。

已执行操作 #

• Vue.js 应用使用封装的 fetch wrapper 方法与 Laravel API 交互
• 该 fetch wrapper 用于统一处理认证请求头和响应解析逻辑
• 向 /api/login 端点发送 POST 请求时触发上述错误

Fetch Wrapper 代码片段 #

export const fetchWrapper = {
    "get": request('GET'),
    "post": request('POST'),
    "put": request('PUT'),
    "delete": request('DELETE')
};

function request(method) {
    return (url, body) => {
        const requestOptions = {
            method,
            headers: authHeader(url)
        };
        if (body) {
            requestOptions.headers['Content-Type'] = 'application/json';
            requestOptions.body = JSON.stringify(body);
        }
        return fetch(url, requestOptions).then(handleResponse);
    }
}

function authHeader(url) {
    // ... (认证请求头实现)
    // 若用户已登录且请求指向API地址，返回带JWT的认证头
    const { token } = useAuthStore();
    const isLoggedIn = !!token;
    const isApiUrl = url.startsWith(//path_to_env->api_url);
    if (isLoggedIn && isApiUrl) {
        return { "Authorization": `Bearer ${token}` };
    } else {
        return {};
    }

}

function handleResponse(response) {
    // ... (响应处理实现)
    return response.text().then(text => {
        if (!response.ok) {
            const { user, logout } = useAuthStore();
            if ([401, 403].includes(response.status) && user) {
                // 若API返回401 Unauthorized或403 Forbidden，自动登出
                logout();
            }

            const error = (text && text) || response.statusText;
            return Promise.reject(error);
        }

        try {
            const data = JSON.parse(text);
            return data;
        } catch (error) {
            // 处理非JSON响应的解析错误
            console.error('Error parsing JSON:', error);
            return text;
        }
    });
}

登录调用代码片段 #

async login(username, password) {
    try {
        const res = await fetchWrapper.post(`${url}/login`, {
            "email": username,
            "password": password,
        }, {
            "headers": {
                "Accept": 'application/json',
                'Content-Type': 'application/json',
            },
        });

        // ... (登录响应处理)
    } catch (error) {
        // ... (请求错误处理)
    }
}

核心矛盾 #

尽管已配置正确的请求头，且确认后端 /api/login 端点允许使用 POST 方法，但 API 仍返回405 Method Not Allowed错误。

环境信息 #

• Laravel 版本：Laravel Installer 5.2.1
• Vue.js 版本：@vue/cli 5.0.8
• Laravel CORS 配置（config/cors.php）：

'paths' => ['api/*', 'sanctum/csrf-cookie'],

    'allowed_methods' => ['*'],

    'allowed_origins' => ['*'],

    'allowed_origins_patterns' => [],

    'allowed_headers' => ['*'],

    'exposed_headers' => [],

    'max_age' => 0,

    'supports_credentials' => false,

• 运行环境：LocalHost

已排查内容 #

• 检查 CORS 配置：确认 allowed_methods 包含 POST，且路径规则覆盖 /api/login
• 验证后端路由：确认 /api/login 端点存在并支持 POST 请求
• 核对 Fetch Wrapper 实现：确认 POST 请求的方法、请求头构建逻辑无误

预期结果 #

• 认证成功：向 /api/login 发送携带有效凭证的 POST 请求后，后端返回可用于后续请求的 Token
• 消除405错误：因路由定义和 CORS 配置均允许 POST 请求，不应出现“Method Not Allowed”响应

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