本地服务HTTP转HTTPS后Stripe支付图片资源获取失败问题咨询

问题原因 #

你使用的图片链接是https://localhost:8000/uploads/logo.png，这是本地环回地址，仅能在你的本机网络环境中访问。Stripe的支付服务运行在公网服务器上，无法穿透到你的本地网络获取该资源，因此会提示获取失败。

解决方案 #

方案1：使用公网可访问的图片存储 #

将图片上传至支持HTTPS的云存储服务（如AWS S3、阿里云OSS、Cloudinary等），获取公网可访问的HTTPS链接，替换代码中的本地图片地址。示例：

// 替换成云存储的公网链接
images: ["https://your-cloud-storage-domain/uploads/logo.png"]

方案2：本地开发时使用内网穿透工具 #

如果是本地开发测试场景，可使用内网穿透工具（如ngrok）将本地8000端口映射为公网HTTPS地址：

1. 下载并安装ngrok，执行命令：

   ngrok http 8000
   

2. 复制ngrok生成的HTTPS公网地址（类似https://abc123.ngrok.io），替换图片链接中的localhost:8000，得到：

   https://abc123.ngrok.io/uploads/logo.png
   

3. 将该链接传入Stripe的images字段，Stripe服务器即可正常访问到图片资源。

相关代码与错误信息 #

支付接口代码 #

userDashboard.post("/payment", async (req, res) => {
    const name = "samsung";
    const image =
      "https://wallsdesk.com/wp-content/uploads/2018/03/Pictures-of-lynx.jpg";
    const id = 2456;
    const amount = 100;

    const { product } = req.body;
    console.log(product.image)
    const session = await stripe.checkout.sessions.create({
      payment_method_types: ["card"],
      line_items: [
        {
          price_data: {
            currency: "pkr",
            product_data: {
              name: product.name,
              images: [product.image],
            },
            unit_amount: product.amount * 100,
          },
          quantity: product.quantity, 
          // id:product.id
        },
      ],
      mode: "payment",
      success_url: `${YOUR_DOMAIN}/success`,
      cancel_url: `${YOUR_DOMAIN}/cancel`,
    });

    res.json({ id: session.id });
  });

生成的图片链接 #

https://localhost:8000/uploads/logo.png

错误截图 #

内容的提问来源于stack exchange，提问作者f180111 Yousaf Zahid