Node/Express res.redirect跳转银行支付页被CORS策略拦截问题

这个CORS报错和你Express服务配置的cors()中间件没有任何关系，核心是请求流向和浏览器CORS规则的认知偏差：

• 你通过XHR/axios从前端发起请求到自己的Express服务，服务端返回res.redirect(银行支付地址)的302响应时，浏览器会自动沿用原来异步请求的上下文，带着当前业务域名的Origin头去请求银行的支付网关接口
• 银行侧的支付网关不会配置允许你的业务域名跨域访问，所以针对这个异步请求的OPTIONS预检响应里，不会带匹配你域名的Access-Control-Allow-Origin头，直接触发跨域报错。你自己服务端配置的cors中间件，只会给你自己服务返回的响应加CORS头，完全控制不了银行服务器返回的响应头
• 你把支付链接返回给前端、用户主动点击跳转不报错，是因为<a>标签点击跳转、地址栏直接跳转属于浏览器顶级导航请求，浏览器默认不会对顶级导航请求做CORS校验，这是浏览器内置的安全规则，和跨域配置无关。

• 方案1（最推荐，也是业界支付场景的通用实现）：废弃服务端res.redirect的逻辑，服务端调用银行API拿到合法支付链接后，直接以JSON格式把链接返回给前端，前端拿到链接后直接执行window.location.href = 银行支付链接触发顶级导航跳转，不需要用户手动点击，完全不会触发CORS，和你之前测试的点击跳转效果完全一致
• 方案2：如果必须保留服务端触发跳转的逻辑，可以在服务端返回200响应，响应内容是自动提交的HTML表单，表单action填银行支付地址，method匹配银行要求的请求类型，所有支付签名、订单参数放在隐藏input中，页面加载后自动触发表单提交。这类表单提交同样属于顶级导航，不会触发CORS校验，参考实现：

<!DOCTYPE html>
<html>
<body>
  <form id="paySubmitForm" action="https://银行支付网关地址" method="POST">
    <input type="hidden" name="orderNo" value="对应订单号" />
    <input type="hidden" name="amount" value="实际支付金额" />
    <input type="hidden" name="sign" value="银行要求的校验签名" />
    <!-- 其余银行接口要求的参数全部以隐藏域形式放在这里 -->
  </form>
  <script>
    document.getElementById('paySubmitForm').submit()
  </script>
</body>
</html>

• 方案3（不推荐）：在自己的Express服务中加一层反向代理，所有访问银行支付页的请求都经过你的服务端转发，再给转发回来的响应加上匹配你业务域名的CORS头。这种方案会额外消耗服务器带宽，还容易出现支付签名校验失败、支付态cookie丢失的问题，没有特殊需求不要用。

• 不需要再反复调整你自己Express服务的cors配置，现有配置是正常的——毕竟除支付跳转外其余接口都能正常访问，问题的核心是跨域校验的目标是银行域名，不是你自己的服务域名，修改自己服务的配置永远影响不到银行侧的响应头
• 所有通过XHR/fetch/axios发起的异步请求，不管中间经过多少次302跳转，只要最终响应的资源没有返回匹配当前源的CORS头，就会触发预检失败的报错
• 所有第三方支付、第三方登录类的跨站跳转场景，都必须通过顶级导航的方式实现，不要尝试用异步请求接收重定向的方式处理。

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