Sveltekit端点无法跳转至Stripe结账页面问题排查

问题描述 #

我在SvelteKit应用中配置了+server.js端点，调用该端点时能成功创建包含URL的Stripe会话，但无法跳转至Stripe结账页面。尝试过throw redirect(307, session.url)、response.redirect(307, session.url)和goto(session.url)三种方式都没用，而且没有任何报错信息，请问问题出在哪里？

代码示例 #

const stripe = new Stripe(SECRET_STRIPE_KEY)

try {
    console.log("Attempting to create Stripe session...")
    
    const session = await stripe.checkout.sessions.create({
        mode: "payment",
        payment_method_types: ['card'],
        line_items: lineItems,
        success_url: `http://localhost:5173/checkout/success`,
        cancel_url: 'http://localhost:5173/checkout/details'
    });

    console.log(session)
    response.redirect(307, session.url)

    const newOrder = await createOrder(order, items)

    return new Response({
        status: 200,
        headers: {},
        body: JSON.stringify({
            sessionId: session.id,
            order: newOrder
        })    
    });
} catch (err) {
    return new Response({ 
        status:500,
        headers:{},
        body: JSON.stringify({
            error: err
        })
    });
}

问题原因及修复方案 #

核心问题1：跳转指令被后续代码覆盖 #

你调用response.redirect(307, session.url)后，没有终止代码执行，反而继续运行createOrder并返回了一个200状态的Response。在SvelteKit的服务器端点中，最后返回的Response会覆盖之前的所有响应指令，所以跳转请求被后续的JSON响应覆盖了，浏览器自然不会跳转。

核心问题2：错误的跳转方式 #

• goto()是SvelteKit的客户端路由函数，只能在组件或客户端脚本中使用，服务器端点里调用完全无效。
• 直接使用response.redirect()不是SvelteKit推荐的方式，正确的服务器端跳转应该使用框架提供的redirect函数（需要导入），抛出该函数后会立即终止代码执行，确保跳转响应生效。

修复后的代码 #

import { redirect } from '@sveltejs/kit';
const stripe = new Stripe(SECRET_STRIPE_KEY);

try {
    console.log("Attempting to create Stripe session...");
    
    const session = await stripe.checkout.sessions.create({
        mode: "payment",
        payment_method_types: ['card'],
        line_items: lineItems,
        success_url: `http://localhost:5173/checkout/success`,
        cancel_url: 'http://localhost:5173/checkout/details'
    });

    console.log(session);
    
    // 先确保订单创建成功再跳转（如果业务需要）
    const newOrder = await createOrder(order, items);
    
    // 抛出redirect函数，立即终止代码并返回跳转响应
    throw redirect(307, session.url);

} catch (err) {
    // 捕获错误并返回标准JSON格式错误响应
    return new Response(
        JSON.stringify({ error: err.message }),
        { 
            status: 500,
            headers: { 'Content-Type': 'application/json' }
        }
    );
}

额外注意：客户端调用场景 #

如果你的端点是通过客户端fetch/Axios调用的，服务器返回的307重定向不会自动触发浏览器跳转（fetch默认会跟随重定向但不会改变当前页面）。这种情况下，你需要：

1. 修改服务器端点，返回包含session.url的JSON响应，而不是直接跳转；
2. 在客户端拿到session.url后，用window.location.href = session.url或者客户端的goto()函数手动跳转。

示例（客户端代码）：

// 比如在组件的点击事件中
async function handleCheckout() {
    const res = await fetch('/api/create-stripe-session', { method: 'POST' });
    const data = await res.json();
    window.location.href = data.sessionUrl;
}

对应的服务器端点修改：

// +server.js中去掉redirect，返回sessionUrl
return new Response(
    JSON.stringify({ 
        sessionId: session.id, 
        order: newOrder,
        sessionUrl: session.url
    }),
    { status: 200, headers: { 'Content-Type': 'application/json' } }
);

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