Express部署Heroku后POST请求503报错与CORS跨域问题求解

你遇到的CORS报错和503问题是多个配置错误叠加导致的，核心原因如下：

• 前端错误地在请求头中添加了Access-Control-Allow-*系列头：这类头是服务端返回响应时携带的，前端主动添加属于自定义非法头，会触发浏览器CORS预检（OPTIONS）请求，平白增加跨域校验环节。
• 后端接口缺少异常响应逻辑：/payment路由的catch块仅打印错误日志，没有给前端返回任何响应，一旦Stripe接口调用失败、参数校验不通过，请求会一直挂起直到触发Heroku的超时限制，返回503错误——这类5xx响应默认不会携带CORS头，浏览器就会直接报跨域拦截错误，掩盖真实的接口异常。
• CORS中间件配置不完整：虽然配置了origin: '*'，但没有显式声明允许的请求方法、请求头，也没有确保CORS中间件在所有路由之前加载，预检请求无法正常通过。
• 大概率存在Heroku环境变量缺失问题：本地运行时读取本地.env中的Stripe密钥，部署到Heroku后如果没有在后台配置STRIPE_SEC_KEY环境变量，Stripe初始化就会失败，接口一调用就抛错，结合前面提到的无异常返回的问题，直接触发503。

1. 后端代码修复 #

首先调整中间件顺序，补全CORS配置，完善所有异常分支的响应逻辑，修正后代码如下：

require('dotenv').config();
const cors = require("cors")
const express = require("express")
// 先做环境变量校验，避免Stripe初始化失败
if (!process.env.STRIPE_SEC_KEY) {
  throw new Error("STRIPE_SEC_KEY 环境变量未配置")
}
const stripe = require("stripe")(process.env.STRIPE_SEC_KEY)
const { v4: uuidv4 } = require('uuid');

const app = express();

// 【关键】CORS中间件必须放在所有其他中间件、路由的最前面
app.use(cors({
  origin: ['https://projectnamee.netlify.app', 'http://localhost:3000'], // 不要用*，明确写允许的域名，安全性更高，后续要传cookie也能兼容
  methods: ['GET', 'POST', 'OPTIONS'], // 明确允许的请求方法
  allowedHeaders: ['Content-Type'], // 明确允许的请求头
  credentials: true
}))

// 其他中间件
app.use(express.json())

// 路由
app.get("/", (req, res) => {
    res.send("Works here")
})

app.post("/payment", async (req, res) => {
    try {
      const {product, token} = req.body;
      // 加基础参数校验，避免参数缺失导致Stripe调用报错
      if (!product || !token || !token.email || !token.id) {
        return res.status(400).json({error: "缺少必要参数"})
      }
      console.log("Product", product)
      console.log("price", product.price)
      console.log("email", token.email)
      const idempotencyKey = uuidv4()

      const customer = await stripe.customers.create({
          email: token.email,
          source: token.id
      })
      const result = await stripe.charges.create({
          amount: product.price * 100,
          currency: 'usd',
          customer: customer.id,
          receipt_email: token.email,
          description: `Purchase of ${product.name}`,
          shipping: {
              name: token.card.name,
              address: {
                  country: token.card.address_country
              }
          }
      }, {idempotencyKey})

      return res.status(200).json(result)
    } catch (err) {
      console.log("支付接口错误：", err)
      // 【关键】所有异常必须返回响应，不能只打日志
      return res.status(500).json({error: err.message, type: err.type})
    }
})

const port = process.env.PORT || 8282
app.listen(port, () => console.log(`Listening on port ${port}`))

2. 前端代码修复 #

删掉所有无效的CORS请求头，补全响应错误判断逻辑，修正后代码如下：

const backend_api = process.env.NODE_ENV == 'production' ? 'https://projectname.herokuapp.com/payment' : 'http://localhost:8282/payment';
const purchase = token => {
    let product = purchaseProduct
    const body = {
        token,
        product
    }
    // 只保留实际需要的请求头，删掉所有Access-Control-Allow-*开头的无效头
    const headers = {
        "Content-Type": "application/json"
    }
    return fetch(backend_api, {
        method: "POST",
        headers,
        body: JSON.stringify(body)
    }).then(response => {
        console.log("Response ", response)
        const {status} = response;
        console.log("STATUS ", status)
        // 新增错误判断，非2xx状态直接抛错
        if (!response.ok) {
          return response.json().then(err => Promise.reject(err))
        }
        return response.json()
    })
    .catch(error => console.log(error))
}

3. Heroku配置校验 #

登录Heroku后台，进入你的应用- Settings - Config Vars，确认添加了STRIPE_SEC_KEY配置项，值和你本地.env中的生产环境Stripe密钥一致，避免环境变量缺失导致的接口初始化失败。

1. 本地先启动后端，直接用接口调试工具调用http://localhost:8282/payment，故意传错参数确认能正常收到400/500响应，不会挂起超时。
2. 本地启动前端，确认调用接口没有跨域报错，支付流程正常。
3. 部署后端到Heroku，先直接访问https://projectname.herokuapp.com/确认能返回"Works here"，再用调试工具调用线上/payment接口确认能正常返回响应。
4. 重新部署前端到Netlify，测试线上流程即可。

注：很多时候浏览器报CORS错误并不是跨域配置本身的问题，只要接口返回4xx/5xx、超时未响应、网关错误，响应没有携带CORS头，浏览器都会统一提示跨域拦截，优先排查接口本身的可用性问题，再调整CORS配置能少走很多弯路。

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