Laravel 10.19集成Flutterwave支付时持续出现CORS错误

首先明确：你遇到的CORS错误并非来自你的Laravel应用，而是Flutterwave测试环境域名（ravemodal-dev.herokuapp.com）未配置允许你的前端域名跨域访问。浏览器的CORS限制针对前端直接请求第三方服务的场景，此时需要第三方服务返回合法的CORS头，而非仅配置你的Laravel后端。

以下是针对性解决步骤：

1. 修正前端支付集成方式（最关键） #

Flutterwave的支付模态框不应该通过AJAX/fetch直接请求，官方推荐通过嵌入SDK脚本的方式加载，这种方式不受浏览器CORS限制：

• 在前端页面引入Flutterwave官方JS SDK：

  <script src="https://checkout.flutterwave.com/v3.js"></script>
  

• 使用SDK初始化支付模态框：

  FlutterwaveCheckout({
    public_key: "你的Flutterwave公钥",
    tx_ref: "唯一交易参考号",
    amount: 100,
    currency: "NGN", // 根据你的需求调整
    payment_options: "card, mobilemoney",
    callback: function(response) {
      // 支付完成后的回调逻辑，比如通知你的Laravel后端验证交易
    },
    onclose: function() {
      // 模态框关闭时的处理逻辑
    }
  });
  

2. 规范Laravel的CORS配置（消除潜在问题） #

你的cors.php存在无效配置项，需修正：

• 删除多余的自定义键：'Access-Control-Allow-Origin'和'Access-Control-Allow-Headers'，Laravel会自动根据内置配置生成响应头。
• 将allowed_methods改为数组格式（原字符串无法被Laravel正确解析）：

  'allowed_methods' => ['GET', 'POST', 'PUT', 'PATCH', 'DELETE', 'OPTIONS'],
  

• 将allowed_headers也改为数组格式（可选，更规范）：

  'allowed_headers' => [
      'Authorization',
      'Accept',
      'Origin',
      'DNT',
      'X-CustomHeader',
      'Keep-Alive',
      'User-Agent',
      'X-Requested-With',
      'If-Modified-Since',
      'Cache-Control',
      'Content-Type',
      'Content-Range',
      'Range'
  ],
  

• 确保\Illuminate\Http\Middleware\HandleCors::class在app/Http/Kernel.php的web和api中间件组的最顶部，保证CORS头优先被设置。

3. 后端代理方案（仅当必须直接请求第三方链接时使用） #

如果因特殊需求必须通过前端请求Flutterwave的链接，可通过Laravel作为代理中转：

• 在routes/web.php或routes/api.php添加代理路由：

  use Illuminate\Support\Facades\Http;
  use Illuminate\Http\Request;
  
  Route::get('/proxy/flutterwave-pay', function(Request $request) {
      $paymentReference = $request->query('ref');
      $flutterwaveUrl = "https://ravemodal-dev.herokuapp.com/v3/hosted/pay/{$paymentReference}";
      
      $response = Http::get($flutterwaveUrl);
      
      return response($response->body(), $response->status())
          ->header('Access-Control-Allow-Origin', '*') // 或指定你的前端域名
          ->withHeaders($response->headers()->all());
  });
  

• 前端请求你的Laravel代理路由（如/proxy/flutterwave-pay?ref=你的交易参考号），而非直接请求Flutterwave域名。

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