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

Question

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

这是我收到的警告消息：

[弃用] 该网站从网络请求了一个子资源，由于其用户的特权网络位置，它只能访问该子资源。这些请求将非 public 设备和服务器暴露给互联网，增加了跨站点请求伪造 (CSRF) 攻击的风险，and/or 信息泄露。为了减轻这些风险，Chrome 弃用了从 public 发起的对非 public 子资源的请求非安全上下文，并将在 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,

];

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

Answer 1

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

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

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

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

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

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

Method 405 is not allowed, but in the API routing I defined POST

laravel

vue-router

axios

vuejs2