Laravel集成Stripe支付网关遇CORS跨域问题求解决方案

问题原因 #

前端请求你的Laravel订阅接口时，浏览器发起的预检OPTIONS请求未收到正确的Access-Control-Allow-Origin响应头，导致请求被拦截。

解决步骤 #

1. 配置Laravel CORS中间件 #

修改config/cors.php文件，确保订阅接口路径被纳入CORS规则，同时允许前端域名访问：

return [
    'paths' => ['api/*', '/subscriptions-checkout/*'], // 替换为你的订阅接口实际路由路径
    'allowed_methods' => ['*'],
    'allowed_origins' => ['http://localhost:3000'], // 测试环境可临时用'*'，生产环境必须指定前端域名
    'allowed_origins_patterns' => [],
    'allowed_headers' => ['*'],
    'exposed_headers' => [],
    'max_age' => 0,
    'supports_credentials' => false,
];

同时确认app/Http/Kernel.php的中间件组已启用CORS中间件：

protected $middlewareGroups = [
    'web' => [
        // ...其他中间件
        \Fruitcake\Cors\HandleCors::class,
    ],

    'api' => [
        // ...其他中间件
        \Fruitcake\Cors\HandleCors::class,
    ],
];

2. 调整接口返回逻辑（推荐方案） #

避免用AJAX请求直接接收重定向响应，改为返回Stripe Checkout会话URL，让前端主动跳转：

public function subscriptions_checkout(Request $request, string $plan)
{
    $checkoutSession = $request->user()
        ->newSubscription('default', $plan)
        ->checkout([
            'success_url' => route('success_checkout'),
            'cancel_url' => route('plans'),
        ]);

    // 返回会话URL给前端处理跳转
    return response()->json(['checkout_url' => $checkoutSession->url]);
}

前端拿到URL后直接跳转（示例）：

axios.post('/subscriptions-checkout/your-plan-id')
    .then(res => {
        window.location.href = res.data.checkout_url;
    });

3. 本地测试额外配置 #

如果是本地开发环境，需在.env文件中设置正确的状态域：

SANCTUM_STATEFUL_DOMAINS=localhost:3000 // 替换为你的前端实际端口/域名

内容的提问来源于stack exchange，提问作者anas tair