localhost前端请求外部API遭CORS策略拦截问题求助

问题原因 #

从报错信息看，核心问题有两点：

1. 请求头配置错误：请求中携带了Access-Control-Allow-Origin字段，但这是响应头而非请求头。PhonePe服务器的预飞行响应未允许该请求头，导致浏览器拦截请求。
2. 跨域重定向限制：前端通过AJAX请求后端接口后，后端重定向到外部PhonePe API。此时浏览器会将前端的origin（http://localhost:8080）带入请求，但PhonePe API未配置允许该origin的跨域请求，触发CORS报错。Postman不受浏览器CORS规则限制，因此单独测试后端接口正常。

可行解决方案 #

方案1：后端作为代理转发请求（推荐） #

让后端直接调用PhonePe API，将结果返回给前端，避免前端直接与外部API通信。浏览器仅与你的后端交互，后端与外部API的通信不受浏览器CORS限制。

示例Express代码：

const express = require('express');
const router = express.Router();
const axios = require('axios');

router.post('/api/payment/newPayment', async (req, res) => {
  try {
    // 后端内部调用PhonePe API
    const phonePeRes = await axios.post(
      'https://mercury-t2.phonepe.com/transact/pg',
      req.body,
      {
        headers: {
          'Content-Type': 'application/json',
          // 添加PhonePe要求的授权等必要头信息，不要加Access-Control-Allow-Origin
        }
      }
    );
    // 将外部API结果返回给前端
    res.status(phonePeRes.status).json(phonePeRes.data);
  } catch (err) {
    res.status(err.response?.status || 500).json({
      message: '支付请求失败',
      detail: err.response?.data || err.message
    });
  }
});

module.exports = router;

方案2：移除错误的请求头 #

检查前端和后端代码，确保未将Access-Control-Allow-Origin添加到请求头中：

• 前端fetch请求修正示例：

fetch('/api/payment/newPayment', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
    // 移除Access-Control-Allow-Origin这一行
  },
  body: JSON.stringify(paymentData)
});

• 同时检查后端CORS配置，确保未错误地将该头添加到转发请求中。

方案3：改用页面跳转而非AJAX请求 #

如果PhonePe要求必须跳转至其页面完成支付，后端不要返回AJAX重定向，而是返回HTML页面通过JS或表单跳转：

router.get('/api/payment/newPayment', (req, res) => {
  // 生成PhonePe支付链接参数
  const paymentUrl = 'https://mercury-t2.phonepe.com/transact/pg?' + new URLSearchParams({
    token: 'your_payment_token'
  });
  // 返回跳转页面
  res.send(`
    <html>
      <body>
        <script>window.location.href="${paymentUrl}";</script>
      </body>
    </html>
  `);
});

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