Stripe集成报错：.catch中console.error(e.error)返回undefined求助

核心问题 #

你代码里的res.JSON()写法错误——JavaScript的Fetch API中，Response对象解析JSON的方法是小写的res.json()，大小写敏感。调用大写的res.JSON()会直接抛出“方法不存在”的错误，导致请求流程提前中断，根本没走到后端接口交互的环节，所以你看不到预期的“API缺失”提示。

修复步骤 #

1. 修正JSON解析方法
   把前端代码中所有的res.JSON()替换为res.json()，修改后的purchaseClicked函数如下：

function purchaseClicked() {
    fetch('/create-checkout-session', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({
            items: [
                { id: 1, quantity: 3},
                { id: 2, quantity: 1}
            ]
        })
        })
        .then(res => {
            if (res.ok) return res.json()
            return res.json().then(json => Promise.reject(json))
        })
        .then(({url}) => {
            console.log(url)
            window.location = url
        })
        .catch(e => {
            console.error(e.error || e)
        })
}

2. 添加错误兜底处理
   在catch块中，e.error可能不存在（比如前端自身的语法/方法错误），所以用e.error || e兜底，确保不管什么类型的错误都能正常打印，方便后续排查。

修复后验证 #

修正后，前端会正常发送请求到后端的/create-checkout-session接口。如果后端确实没有配置该接口，你会收到预期的“API缺失”相关错误（比如404状态码）；如果后端接口配置正常，就能正确获取Stripe的 checkout URL 并跳转。

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