部署后RazorPay支付网关出现CORS跨域错误的解决咨询

核心问题定位 #

本地正常、部署后仅支付接口触发CORS，大概率是CORS中间件未覆盖支付路由，或是部署环境下的CORS配置未适配前端生产域名。

步骤1：修正Express.js的CORS中间件配置 #

确保CORS中间件在所有路由之前加载，且明确允许你的生产前端域名（同时保留本地开发地址方便调试）。

修改你的Express主文件（如server.js/app.js）：

const express = require('express');
const cors = require('cors');
const app = express();

// 配置CORS规则
const corsOptions = {
  origin: ['https://your-production-frontend.com', 'http://localhost:3000'], // 替换为你的实际域名
  credentials: true, // 若支付请求需携带认证信息（如token）则开启
  allowedHeaders: ['Content-Type', 'Authorization']
};

// 必须在所有路由挂载前启用CORS
app.use(cors(corsOptions));

// 之后挂载支付及其他路由
app.use('/api/payments', require('./routes/paymentRoutes'));
// 其他业务路由...

app.listen(process.env.PORT || 5000);

步骤2：确认支付路由被CORS中间件覆盖 #

检查支付相关路由的挂载顺序：必须在app.use(cors())之后，否则该路由不会被CORS规则覆盖，导致跨域错误。

步骤3：规范前端RazorPay调用方式 #

前端不要直接请求RazorPay的API端点，应通过后端生成订单ID，再使用官方SDK发起支付：

// 前端正确调用示例
const initiatePayment = async () => {
  // 先从后端获取订单ID
  const orderRes = await fetch('/api/payments/create-order', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ amount: 50000 }) // 金额为最小单位（如印度卢比派萨）
  });
  const { orderId } = await orderRes.json();

  // 初始化RazorPay SDK
  const rzp = new Razorpay({
    key: 'YOUR_TEST_KEY', // 测试环境密钥
    amount: 50000,
    currency: 'INR',
    order_id: orderId,
    handler: async (response) => {
      // 支付成功后通知后端验证
      await fetch('/api/payments/verify', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          orderId: response.razorpay_order_id,
          paymentId: response.razorpay_payment_id,
          signature: response.razorpay_signature
        })
      });
    }
  });
  rzp.open();
};

步骤4：部署环境额外检查 #

1. 若部署在Heroku/Vercel等平台，确保环境变量中的前端域名配置正确，不要硬编码本地地址；
2. 检查平台自带的CORS配置（如Vercel的vercel.json），避免与Express的CORS规则冲突；
3. 用浏览器开发者工具的Network标签，查看支付请求的响应头，确认Access-Control-Allow-Origin已正确设置为你的生产域名。

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