方法 405 是不允许的，但是在 API 路由中我定义了 POST答案

【问题标题】：Method 405 is not allowed, but in the API routing I defined POST方法 405 是不允许的，但是在 API 路由中我定义了 POST
【发布时间】：2021-09-07 22:18:41
【问题描述】：

我在 Laravel 和 Vue 的帮助下创建了一个 SPA，并且路由以前可以正常工作，但由于某种原因，它现在给了我这个错误：“不允许使用方法 405”。

这是我收到的警告消息：

"[弃用] 该网站从网络请求子资源，由于其用户的特权网络位置，它只能访问该子资源。这些请求将非公共设备和服务器暴露在互联网上，增加了跨站点请求伪造 (CSRF) 攻击和/或信息泄露。为了降低这些风险，Chrome 弃用从非安全上下文发起的对非公共子资源的请求，并将在 Chrome 92（2021 年 7 月）中开始阻止它们。有关详细信息，请参阅https://chromestatus.com/feature/5436853517811712。”

这是进行 API 调用的函数：

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

这里是 API 路由文件：

Route::post('molliepayment', [OrderController::class, 'preparePayment'])->name('mollie.payment');

最后，这是 Vue-Router：

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

还有一点需要注意：我正在使用 SSH 隧道

这是我的 beforeMount()：

axios.defaults.headers.common['Content-Type'] = 'application/json'
axios.defaults.headers.common['Authorization'] = 'Bearer ' + localStorage.getItem('vue-laravel-ecommerce.jwt')

这是我的 cors.php 配置：

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

    'allowed_methods' => ['*'],

    'allowed_origins' => ['*'],

    'allowed_origins_patterns' => [],

    'allowed_headers' => ['*'],

    'exposed_headers' => [],

    'max_age' => 0,

    'supports_credentials' => false,

];

额外信息 我认为它发生在我开始使用子路由之后。

【问题讨论】：

提供完整的 URL，例如 localhost:8000/api/molliepayment
是的，我错过了 / ！如此幼稚的错误
那是编程。大声笑

标签： laravel vuejs2 axios vue-router

【解决方案1】：

请求 axios.post('api/molliepayment'... 指的是相对 URL，这意味着如果您是目前在/checkout/payment，它会向http://example.com/checkout/payment/api/molliepayment发出请求，如果你有一个SPA和一个“catch-all”路由来加载索引，那么这就是这个请求会遇到的问题，并且大概不允许这样的POST一个请求。

您可以使用axios.post('/api/molliepayment'... 来解决此问题，但更好的方法是通过您的 .blade.php 视图传递实际的完整 URL，例如

<script>
window.molliepaymentURL = '{{ route('mollie.payment' }}';
</script>

并使用axios.post(window.molliepaymentURL...

这将允许您更改路由路径而无需更改 JS，此外，如果您使用 Laravel 根为子路径的不常见主机设置，它也不会中断

【讨论】：