如何使用stripe从laravel中获取vue组件中的csrf token

Question

我无法正确重定向至付款方式。我使用 laravel 10 作为后端，vue3 作为前端。我收到错误消息：跨源请求被阻止：同源策略不允许读取远程资源：（条带结帐链接）（原因：缺少 CORS 标头“Access-Control-Allow-Origin”）。状态代码：403。下面我展示了在 cookie 中我有 xsrf 令牌，并且还输入了代码：

const getToken = async () => {
    try {
        await axios.get('/sanctum/csrf-cookie');
    } catch (error) {
        console.error("Failed in getting CSRF:", error);
    }
};

const savePaymentMethod = async () => {
    localStorage.setItem('paymentMethod', paymentForm.value.payment_method);
    
    try {
         await getToken(); 
         await axios.post('/checkout');
    } catch (error) {
        console.error("Error with sending payment:", error);
    }
};

 <form @submit.prevent="savePaymentMethod" method="post">
    <div class="mb-4">
        <label for="payment_method" class="block mb-2">Payment Method:</label>
            <select v-model="paymentForm.payment_method" id="payment_method" required class="border rounded p-2 w-full">
                <option value="" disabled selected>Select payment method</option>
                <option value="stripe">Stripe</option>
            </select>
      </div> 
<button type="submit" class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">Pay</button>
</form>

在控制台显示付款链接，但有错误，为什么会发生这种情况？

我尝试将令牌放入标题（视图）的元标记中
就像这个例子一样：如何在 vue 模板中引用 laravel csrf 字段

Answer 1

在使用 Sanctum 之前，您必须了解“API Token 认证”和“SPA 认证”之间的区别。请说明您在问题中使用的是哪一种。 “SPA认证”只能在同源或同域内使用。如果您收到 CORS 错误，则表明您在不了解“SPA 身份验证”的情况下尝试使用它。

假设您正在使用“同一域的子域上的 SPA 身份验证”。

• Laravel：http://laravel.example.com
• Vue：http://example.com

问题中需要的不是代码，而是运行它的环境。

根本原因是

config/cors.php

中的CORS设置错误。 Laravel10 的默认设置是“仅允许来自所有域的 api/* 和 sainttum/csrf-cookie”。您问题中的

checkout

是不允许的。

因此，允许一切应该可以解决问题。限制前面的网址。

// config/cors.php 

'paths' => ['*'], 
'allowed_origins' => [env('FRONTEND_URL', 'http://localhost:3000')], 

如果您计划在生产中的不同域上运行它，那么您现在编写的代码将根本无法工作。

• Laravel：http://example-laravel
• Vue：http://example-vue