React+Node.js集成Stripe结账页遇Proxy error(ECONNREFUSED)求助

核心问题分析 #

错误Proxy error: Could not proxy request /create-checkout-session from localhost:3000 to http://localhost:3000/ (ECONNREFUSED)本质是前端代理请求的目标端口没有运行后端服务，大概率是端口冲突或后端未启动导致的。

分步解决方案 #

1. 调整后端端口，避免与React冲突

React开发服务器默认占用3000端口，后端不能再使用该端口。修改server.js的监听端口为Stripe官方推荐的4242（或其他未被占用的端口）：

// server.js 末尾
app.listen(4242, () => {
  console.log('Server running on http://localhost:4242');
});

2. 启动后端服务并确认状态

运行后端服务：

node server.js
# 若后端package.json配置了start脚本，可使用 npm start

确认控制台输出类似Server running on http://localhost:4242的提示，说明后端已正常启动。

3. 修正前端代理配置

修改前端项目根目录的package.json，将代理指向后端实际运行的端口：

{
  "name": "your-react-app",
  "proxy": "http://localhost:4242",
  // 其他配置项...
}

注意：修改代理配置后必须重启React开发服务器，新配置才会生效。

4. 验证接口可用性

用curl或Postman测试后端接口是否正常响应：

curl -X POST http://localhost:4242/create-checkout-session

若返回Stripe的session URL或合理的错误信息，说明后端接口无问题；若仍连接失败，检查后端代码是否有语法错误、环境变量是否配置正确。

5. 备选方案：绕开代理直接请求

如果代理配置仍有问题，可直接在前端代码中使用后端全路径发起请求：

// CheckoutPage.jsx 中的请求代码
const response = await fetch('http://localhost:4242/create-checkout-session', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ /* 你的请求参数 */ }),
});

额外排查点 #

• 检查端口占用：用lsof -i :3000（Mac/Linux）或netstat -ano | findstr :3000（Windows）查看3000端口是否被其他进程占用，必要时杀掉占用进程。
• 环境变量配置：后端需正确加载Stripe密钥，确保安装了dotenv包，且根目录有.env文件，内容为STRIPE_SECRET_KEY=你的秘钥字符串。
• 路由匹配：确认后端的/create-checkout-session路由为POST方法，且路径与前端请求完全一致。

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