Stripe Payment Sheet请求失败：401错误及Promise状态异常排查

你的代码 #

useEffect(() => {
  const fetchPaymentSheetParams = async () => {

    try {
      const response = await axios.post(`${API_BASE_URL}/payment-sheet`, {
        headers: {
          'Content-Type': 'application/json',
           OTHER REQUIRED HEADER...
        },
      });
      return await response.data;
 

    } catch (error) {
      console.log("ERROR-AXIOS:", error)
    }

  };

  const axiosTest = async () => await fetchPaymentSheetParams();
  console.log("AXIOS-PAYMENT:PQP", axiosTest());
}, []);

问题拆解与解决步骤 #

1. 控制台打印{"_A": null, "_x": 0, "_y": 0, "_z": null}的原因

这是因为axiosTest()是async函数，直接调用返回的是Promise对象，不是请求结果。要拿到实际数据得用await或.then()：

// 修正打印逻辑
useEffect(() => {
  const fetchAndLog = async () => {
    const result = await fetchPaymentSheetParams();
    console.log("AXIOS-PAYMENT:PQP", result);
  };
  fetchAndLog();
}, []);

2. 401权限错误的核心问题

你把请求头放错位置了！axios.post的第二个参数是请求体，第三个参数才是包含headers的配置对象。现在你把headers当作请求体发送，服务器根本没收到正确的权限验证头，所以返回401。

修正后的请求写法：

const response = await axios.post(`${API_BASE_URL}/payment-sheet`, 
  // 第二个参数：无请求体就传空对象
  {}, 
  // 第三个参数：配置对象，存放请求头
  {
    headers: {
      'Content-Type': 'application/json',
      // 补充你的其他必填请求头，比如 Authorization: 'Bearer xxx'
      ...OTHER_REQUIRED_HEADERS
    },
  }
);

3. 额外排查点

• 检查必填请求头的拼写：比如Authorization有没有写错，token是否带了正确前缀（如Bearer ），token是否过期。
• 确认API_BASE_URL是否正确，避免请求到错误域名导致权限验证失败。
• 打开浏览器开发者工具的「网络」面板，查看实际发送的请求头，确认服务器是否收到了正确的验证信息。

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