Flutter Web应用使用Pusher时broadcasting/auth的XMLHttpRequest跨域问题求助

针对你遇到的问题，以下是具体的排查和解决步骤：

• 调整CORS中间件加载顺序
  打开app/Http/Kernel.php，确保\Fruitcake\Cors\HandleCors::class中间件放在web或api中间件组的最顶部，或者添加到全局中间件数组中。这样能保证CORS预检请求被优先处理，不会被其他中间件拦截。

• 明确指定允许的请求头
  把CORS配置中的allowed_headers从['*']改为明确列出的头，取消注释你已有的配置行：

  'allowed_headers' => ['Content-Type', 'X-Requested-With', 'Authorization'],
  

  浏览器在处理带自定义头（比如Authorization）的预检请求时，对通配符*的支持存在限制，明确指定头能避免这个问题。

• 清除配置缓存
  运行以下命令清除Laravel的配置缓存，确保修改后的CORS规则生效：

  php artisan config:clear
  php artisan cache:clear
  

  同时清空浏览器缓存，避免旧的CORS响应被缓存。

• 检查路由与中间件绑定
  执行php artisan route:list查看broadcasting/auth路由的绑定情况，确保它没有被额外的中间件（比如认证中间件）提前拦截。如果需要，你可以在routes/channels.php中自定义路由来覆盖默认的auth路由，确保它使用正确的中间件组：

  Route::post('/broadcasting/auth', function (Request $request) {
      // 自定义auth逻辑，或者调用默认的Broadcast认证
      return Broadcast::auth($request);
  })->middleware(['cors']); // 确保cors中间件被应用
  

• 验证supports_credentials配置
  如果你的前端请求携带了凭证（比如Cookie），需要将supports_credentials设为true，同时allowed_origins不能使用*，要指定具体的源：

  'allowed_origins' => ['http://localhost:53050', 'https://your-production-domain.com'],
  'supports_credentials' => true,
  

  注意这种情况下不能再用通配符*作为允许的源，必须明确列出所有需要访问的前端域名。

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