Laravel+Filament集成谷歌云存储遭遇CORS跨域请求阻塞问题

问题场景 #

环境：Laravel 9.19、Livewire 2.10、Filament 2.0、masbug/flysystem-google-drive-ext 2.2

使用谷歌云盘作为filesystems存储驱动时，文件可正常存储和打开，但Filament无法获取已存储文件，控制台报错：Access blocked by CORS policy No 'Access-Control-Allow-Origin' header is present on the requested resource。Filament文件上传输入框持续处于加载状态，仅靠浏览器CORS插件能临时解决，需无插件的可行方案。

已尝试的无效操作：调整Laravel CORS配置（多种paths、origin设置）、自定义CORS中间件、修改.htaccess、执行php artisan config:clear和php artisan cache:clear。

相关配置如下：

• filesystems.php谷歌驱动配置：

'google' => [
  'driver' => 'google',
  'clientId' => "xxxxxxxxxxxx.apps.googleusercontent.com",
  'clientSecret' => "xxxxxxxxxxxxxxxxxxxxx",
  'refreshToken' => "xxxxxxxxxxxxxxxxxxxxxx",
  'folderId' => env('GOOGLE_DRIVE_FOLDER_ID', null),
],

• config/cors.php配置：

<?php

return [
  'paths' => ['api/*'], //尝试过['api/*', 'oauth/*']、[]和['*']均无效
  'allowed_methods' => ['*'],
  'allowed_origins' => ['*'],
  'allowed_origins_patterns' => [], //尝试过['*']无效
  'allowed_headers' => ['*'],
  'exposed_headers' => [],
  'max_age' => 0,
  'supports_credentials' => false, //尝试过true无效
];

• ComplaintResource.php中FileUpload组件：

public static function form(Form $form): Form
{
  return $form
    ->schema([
      Section::make('')
        ->schema([
          FileUpload::make('reply_pdf')
            ->disk('google')
            ->acceptedFileTypes(['application/pdf']),
        ])->columns(3)
    ]);
}

解决方案 #

问题根源是谷歌云盘自身的CORS策略限制，而非Laravel的CORS配置，需通过以下步骤配置：

1. 配置谷歌OAuth客户端授权来源

   • 进入谷歌云控制台，打开「API和服务」→「凭据」页面
   • 找到用于云盘API的OAuth客户端ID，在「已获授权的JavaScript来源」中添加你的应用域名（如https://your-app-domain.com），本地开发则添加http://localhost:8000这类地址

2. 设置谷歌云盘CORS规则

   • 安装谷歌云SDK并登录账号
   • 创建cors-config.json文件，内容如下（替换为你的实际域名）：

     [
       {
         "origin": ["https://your-app-domain.com", "http://localhost:8000"],
         "method": ["GET", "HEAD"],
         "responseHeader": ["*"],
         "maxAgeSeconds": 3600
       }
     ]
     

   • 执行命令将配置应用到目标云盘文件夹（替换FOLDER_ID为你的谷歌云盘folderId，若不知道存储桶名称可通过gsutil ls查看）：

     gsutil cors set cors-config.json gs://drive-XXXXXX/FOLDER_ID
     

3. 优化Filament文件链接生成

   • 修改FileUpload组件配置，使用临时签名URL替代直接暴露谷歌云盘原始链接：

     FileUpload::make('reply_pdf')
       ->disk('google')
       ->acceptedFileTypes(['application/pdf'])
       ->temporaryUrl(now()->addMinutes(30));
     

完成以上配置后，浏览器即可正常加载谷歌云盘中的文件，无需依赖CORS插件。

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