Angular集成Stripe Checkout显示Something went wrong及401错误求助

你的报错401属于Stripe端的身份校验失败，结合你描述的场景，可按以下顺序排查修复：

• 检查Stripe密钥环境是否匹配
  你当前服务端用的是测试环境的Secret Key创建Checkout Session，需要确保前端初始化Stripe实例时，用的是同环境对应的Publishable Key，不能出现服务端用测试密钥、前端用生产Publishable Key的情况，两者环境不一致必然触发401错误。
• 调整CORS头的设置位置，补充OPTIONS请求处理
  你当前代码是在Stripe Session创建完成后才设置CORS头，预检的OPTIONS请求不会走到后续业务逻辑，会直接被浏览器拦截。修改execute函数逻辑如下：

  const execute = async (request: any, response: any, stripeSecretKey: string) => {
    // 先处理CORS和预检请求
    response.setHeader('Access-Control-Allow-Origin', '*');
    response.setHeader('Access-Control-Allow-Methods', '*');
    response.setHeader("Access-Control-Allow-Headers", "X-Requested-With,Content-Type");
    // 预检请求直接返回204
    if (request.method === 'OPTIONS') {
      return response.status(204).send('');
    }
    
    const body = typeof request.body === 'string' ? JSON.parse(request.body) : request.body;
    const STRIPE_PRICE_ID = body.priceId
    const session = await createStripeSession(body, stripeSecretKey, STRIPE_PRICE_ID);
    response.send(session);
  }
  

  额外补充：Firebase HTTPS请求会自动解析application/json类型的请求体为对象，不需要手动调用JSON.parse，加一层判断避免解析报错。
• 检查前端跳转逻辑是否正确
  确认你前端拿到Session返回值后，是通过Stripe官方的redirectToCheckout方法跳转，而不是直接修改location.href跳转，示例逻辑参考：

  // 前端Angular代码示例
  import { loadStripe } from '@stripe/stripe-js';
  // 这里的Publishable Key要和服务端Secret Key同环境
  const stripe = await loadStripe('pk_test_xxxxxx你的测试Publishable Key');
  
  // 调用你的Firebase Function拿到session后
  const { error } = await stripe.redirectToCheckout({
    sessionId: session.id
  });
  

• 检查Stripe后台配置
  登录Stripe后台，查看「开发者」-「日志」板块，找到对应401的请求记录，看Stripe返回的具体错误原因，多数情况下会明确提示是密钥不匹配、环境错误还是Session已过期等问题。

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