React开发环境调用Khipu支付API遇CORS错误，求解决方案

你遇到的CORS错误核心原因是：浏览器发送的预OPTIONS请求未得到Khipu服务器的正常响应，而create-react-app默认的package.json proxy配置无法处理这类复杂跨域场景，以下是几种可行的解决方案：

方案1：使用http-proxy-middleware自定义代理 #

这是create-react-app官方推荐的灵活代理方案，能处理复杂的跨域请求配置：

• 安装依赖：

npm install http-proxy-middleware --save-dev

• 在项目src目录下创建setupProxy.js文件，添加代理配置：

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(
    '/api/khipu',
    createProxyMiddleware({
      target: 'https://khipu.com/api/2.0',
      changeOrigin: true,
      pathRewrite: {
        '^/api/khipu': '', // 替换请求路径前缀，确保转发到正确的API地址
      },
      // 手动处理预OPTIONS请求，返回200状态
      onProxyReq: (proxyReq, req, res) => {
        if (req.method === 'OPTIONS') {
          res.status(200).end();
          return;
        }
      },
    })
  );
};

• 修改React中的请求代码，将原请求地址https://khipu.com/api/2.0/payments替换为/api/khipu/payments
• 重启开发服务器，代理规则会自动生效

方案2：搭建本地Node.js代理服务器 #

如果自定义中间件仍无效，可以自己写一个简单的Node服务器作为转发层，完全避开浏览器CORS限制：

• 在项目根目录创建proxy-server.js：

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

const app = express();
app.use(cors());
app.use(express.json());

// 转发支付请求到Khipu API
app.post('/payments', async (req, res) => {
  try {
    const response = await axios.post('https://khipu.com/api/2.0/payments', req.body, {
      headers: {
        // 这里添加Khipu要求的认证头，比如Authorization
        'Authorization': '你的Khipu API密钥',
        'Content-Type': 'application/json',
      },
    });
    res.json(response.data);
  } catch (error) {
    res.status(error.response?.status || 500).json(error.response?.data || '请求失败');
  }
});

const PORT = 5000;
app.listen(PORT, () => {
  console.log(`代理服务器运行在http://localhost:${PORT}`);
});

• 安装依赖：

npm install express axios cors --save-dev

• 启动代理服务器：

node proxy-server.js

• 修改React中的请求地址为http://localhost:5000/payments

方案3：临时禁用浏览器CORS（仅开发测试用） #

注意：此方法仅适合本地调试，绝对不能用于生产环境：

• Chrome浏览器可安装CORS Unblock类插件，开启后绕过浏览器CORS限制
• 或启动Chrome时添加命令行参数：

# Windows系统
chrome.exe --disable-web-security --user-data-dir="C:/ChromeDevSession"

# Mac系统
open -n -a /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --args --disable-web-security --user-data-dir="/tmp/ChromeDevSession"

重要提醒 #

Khipu支付API的密钥等敏感信息绝对不能暴露在前端代码中，生产环境必须通过后端服务器转发请求，开发环境也建议用上述代理方案模拟生产流程，避免密钥泄露。

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