对接Stripe支付时axios调用/api/charge返回404错误如何解决？

问题排查与解决方案 #

你遇到的POST http://localhost:3000/api/charge 404 (Not Found)报错，核心原因是该API路由没有在当前运行的服务中正确注册，按以下步骤逐一排查即可解决：

1. 按项目框架匹配路由规则 #

• 若使用Next.js框架：
  Next.js默认仅会将pages/api目录下的文件识别为服务端API路由。请检查你当前charge.js的存放位置，将其移动到项目根目录的pages/api文件夹中，重启项目后路由即可正常访问。
• 若使用Create React App（CRA）搭建的纯前端项目：
  CRA本身仅提供前端静态资源服务，没有内置服务端路由处理能力，需要单独搭建后端服务：
  • 用Express等后端框架编写接口，配置POST类型的/api/charge路由，将现有charge.js的逻辑迁移到后端服务中
  • 后端服务启动后监听单独端口（例如3001），配置CORS中间件允许前端3000端口的跨域请求
  • 将前端axios请求地址修改为完整路径：axios.post("http://localhost:3001/api/charge", { id, amount: 1099 })

2. 补充注意事项 #

• 当前代码中硬编码了Stripe的公钥和私钥，后续上线前务必替换为环境变量存储，避免密钥泄露造成资金损失
• 若你用Express自行搭建后端，需要先配置express.json()中间件，才能正确解析POST请求的JSON格式body参数
• 启动项目前确认后端服务端口无占用、接口请求方法确实配置为POST

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