Vue SPA下载Excel时遇CORS Allow Origin不匹配问题排查

一、检查Vue端请求配置 #

• 确保请求设置正确的responseType：下载二进制Excel文件必须将responseType设为blob，否则浏览器会错误解析数据触发CORS异常。示例代码：

  axios.get('/api/download-excel', {
    responseType: 'blob' // 必须配置，避免二进制数据被当作JSON解析
  }).then(res => {
    // 处理下载逻辑
    const url = window.URL.createObjectURL(new Blob([res.data]))
    const a = document.createElement('a')
    a.href = url
    a.download = 'file.xlsx'
    document.body.appendChild(a)
    a.click()
    window.URL.revokeObjectURL(url)
    document.body.removeChild(a)
  })
  

• 确认请求源与Laravel配置的允许源完全匹配：浏览器对CORS源的匹配严格区分协议、域名、端口，比如Vue运行在http://localhost:8080，就不能在CORS配置里只写http://localhost；生产环境要保证域名（含http/https）完全一致。
• 检查是否携带自定义请求头：如果请求添加了Authorization这类自定义头，会触发浏览器OPTIONS预检请求，需确保Laravel的CORS配置允许这些头。

二、检查Laravel控制器的响应处理 #

• 不要手动设置CORS相关响应头：fruitcake/laravel-cors中间件会自动处理CORS头，手动添加Access-Control-Allow-Origin等头会导致冲突，引发源不匹配错误。
• 确保Excel响应头配置正确：返回Excel时需设置正确的Content-Type和Content-Disposition，示例控制器代码：

  public function downloadExcel()
  {
      // 生成Excel文件逻辑（以Maatwebsite/Laravel-Excel为例）
      $excel = Excel::download(new ExportClass, 'file.xlsx');
      // 不要手动添加CORS头，交给cors中间件处理
      return $excel;
  }
  

• 确认路由已应用cors中间件：检查下载接口路由是否在api路由组内（默认api组已绑定cors中间件），或手动为路由添加中间件：

  Route::get('/download-excel', [ExcelController::class, 'downloadExcel'])->middleware('cors');
  

三、检查fruitcake/laravel-cors配置（config/cors.php） #

• 检查paths配置：确保下载接口路径被包含，比如接口是/api/download-excel，paths里需有'api/*'或具体的'api/download-excel'。
• 检查allowed_origins：若请求携带凭证（如cookie、token），不能用通配符*，需指定具体允许源，示例：

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

• 检查allowed_methods：确保包含请求使用的方法（GET/POST），可设为['*']允许所有方法。
• 检查supports_credentials：若请求携带凭证（如axios设置了withCredentials: true），需将该值设为true，同时allowed_origins不能用通配符。
• 检查allowed_headers：若请求有自定义头，需将其加入数组，或设为['*']允许所有头。

额外排查点 #

• 清除浏览器缓存：旧的CORS响应头缓存可能导致新配置不生效，可使用无痕模式测试。
• 检查反向代理（如Nginx）：避免代理服务器手动设置CORS头，否则会与Laravel的cors中间件冲突。

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