Laravel+Vue SPA启用子路由后POST接口返回405 Method Not Allowed错误

• 核心原因是API请求使用了相对路径：你当前调用接口的代码为axios.post('api/molliepayment', ...)，相对路径会和当前浏览器地址栏的页面路由自动拼接。当你访问子路由/checkout/payment、/checkout/confirm时，实际发起请求的地址会变成/checkout/payment/api/molliepayment，和你配置的api/molliepayment POST路由不匹配，Laravel找不到对应POST方法的路由，就会返回405 Method Not Allowed错误。
• Chrome的弃用告警属于环境提示，不是直接导致405的原因：该告警是因为你使用SSH隧道访问内网非公开资源，且当前上下文为HTTP非安全环境，仅为前置风险提示，不直接阻断请求。
• 额外隐患点：Vue子路由的path配置使用了绝对路径，子路由无需携带完整父级路径前缀，可能增加路由匹配的混乱概率。

• 优先修正API请求路径：将相对路径改为绝对路径，在路径前添加/前缀，修改后代码如下：

axios.post('/api/molliepayment', { products, totalPrice }).then(response => {
    window.location.href = response.data.data._links.checkout.href;
}).catch(() => {});

• 更稳妥的全局配置方案：在axios全局配置中添加baseURL，统一前缀避免后续再出现路径拼接问题，修改配置如下：

// 替换为你实际的后端服务地址，生产环境可以直接写域名
axios.defaults.baseURL = 'http://你的后端地址/api'
axios.defaults.headers.common['Content-Type'] = 'application/json'
axios.defaults.headers.common['Authorization'] = 'Bearer ' + localStorage.getItem('vue-laravel-ecommerce.jwt')

配置后请求接口可直接写axios.post('molliepayment', ...)即可。

• 优化Vue路由配置：将子路由的绝对路径改为相对路径，简化配置避免匹配异常：

{
    path: '/checkout',
    component: Checkout,
    children: [
        {            
            path: '',
            component: Address,
        },
        {
            path: 'payment',
            component: Payment,
        },                
        {
            path: 'confirm',
            component: OrderCheck,
        }
    ],
    meta: {
        requiresAuth: true,
    }
},

• 消除Chrome告警的方案：本地开发时配置HTTPS访问环境，生产环境使用合法HTTPS域名部署即可消除该提示，开发阶段可直接忽略不影响功能调试。

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