使用location.href跨域跳转遭CORS拦截，求解决办法

首先得明确一个核心知识点：正常使用location.href跳转外部页面是不会触发CORS检查的——CORS机制只针对AJAX类请求（比如fetch、axios、XMLHttpRequest），页面跳转属于浏览器的正常导航行为，不受CORS规则限制。所以你遇到这个错误，大概率是代码逻辑或者环境存在特殊情况，下面一步步排查解决：

1. 先确认代码是否为单纯的页面跳转 #

先仔细检查你的代码，是不是不小心用了AJAX请求去调用https://paystack.com/secure/xxx，而非用location.href做页面跳转？比如下面这种写法就会触发CORS错误：

// 错误示例：用AJAX请求支付页面，会触发CORS限制
fetch("https://paystack.com/secure/xxx")
  .then(res => res.text())
  .then(html => document.body.innerHTML = html);

如果是这种情况，直接改成location.href = "https://paystack.com/secure/xxx"就能解决问题。

2. 排查是否有外部因素干扰 #

如果确认代码是单纯的location.href跳转，那可能是以下原因导致的异常：

• 浏览器插件干扰：比如广告拦截器、隐私安全类插件，可能把你的跳转请求误判为AJAX请求进行拦截，尝试禁用插件后再测试。
• 框架路由劫持：如果你用了React、Vue这类单页框架，部分路由库可能会改写location.href的行为，把外部跳转变成异步请求。这种情况下，直接用window.location.href（加上window前缀）强制触发原生跳转，不要依赖框架的路由方法。
• 页面内其他AJAX请求：检查页面中是否有其他代码在同时请求Paystack的域名，那个请求才是触发CORS错误的源头，和你的跳转代码无关。

3. 推荐的Paystack集成方式 #

Paystack官方推荐的支付页面跳转方式有两种，都不会出现CORS问题：

• 原生跳转写法：window.location.href = "https://paystack.com/secure/xxx"
• 使用Paystack官方JS SDK弹出支付窗口（用户体验更友好）：

// 示例：用Paystack SDK打开支付弹窗
const paystack = PaystackPop.setup({
  key: 'your_public_key',
  email: 'customer@email.com',
  amount: 10000, // 单位：kobo
  onClose: function(){
    alert('Payment closed');
  },
  callback: function(response){
    // 支付成功后的回调逻辑
    alert('Payment complete! Reference: ' + response.reference);
  }
});
paystack.open();

内容的提问来源于stack exchange，提问作者Mark Adesina Omoniyi