Laravel 6 中配置 CORS 支持文件上传需使用 fruitcake/laravel-cors ^2.2,配置 paths、allowed_origins(不可为*)、allowed_methods、allowed_headers 及 supports_credentials=true,并注册 HandleCors 中间件到 api 中间件组。

在 Laravel 6 中配置 CORS(跨域资源共享)以支持文件上传,核心是确保浏览器的预检请求(OPTIONS)能通过,并且响应头中包含上传所需的关键字段(如 Content-Type、Authorization 等),同时允许携带凭据(如 Cookie 或 Token)——这对登录态下的上传尤为关键。
确认上传请求是否触发预检
文件上传通常使用 multipart/form-data,属于“非简单请求”,浏览器会先发一个 OPTIONS 预检请求。若后端未正确响应,上传直接失败,控制台报错如:
因此,CORS 配置必须覆盖预检流程,而不仅仅是普通 POST 响应头。
推荐方式:使用 fruitcake/laravel-cors(Laravel 6 兼容)
Laravel 6 不自带 CORS 中间件,需手动集成官方推荐包:
- 安装扩展包:
composer require fruitcake/laravel-cors "^2.2"(注意:Laravel 6 对应^2.2版本,^3.x要求 Laravel 8+) - 发布配置:
php artisan vendor:publish --tag="cors",生成config/cors.php - 编辑
config/cors.php,重点配置以下项:
路径匹配要包含上传接口(例如你用 /api/upload 或 /upload):
Laravel Cloud(cloud.laravel.com)。此技能用于处理所有 Laravel Cloud 请求,包括搜索和读取数据。只要任务涉及 Laravel Cloud,即使用此技能。
'paths' => ['api/*', 'upload', 'api/upload'],
允许的源不能为 *(若需携带 Cookie 或 Authorization):
'allowed_origins' => ['http://localhost:3000', 'https://myapp.com'],
明确允许上传相关 headers 和方法:
'allowed_methods' => ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'],<br>'allowed_headers' => ['Content-Type', 'X-Requested-With', 'Authorization', 'X-CSRF-TOKEN'],<br>'supports_credentials' => true,
⚠️ 注意:supports_credentials => true 时,allowed_origins 必须写具体域名,不可用 *,否则浏览器拒绝响应。
注册中间件到全局或 API 组
打开 app/Http/Kernel.php:
- 若所有上传接口都在
api/*下,推荐加到$middlewareGroups['api']中:
'api' => [<br> \Fruitcake\Cors\HandleCors::class,<br> // 其他中间件...<br>],
- 不建议加到全局
$middleware数组(可能影响登录页、静态资源等)
验证上传接口是否生效
上传前可在浏览器开发者工具 Network 标签中检查:
- 点击上传请求 → 查看
Request Headers是否含Origin - 查看是否有
OPTIONS请求发出,且响应状态为200 - 检查响应头是否含:
Access-Control-Allow-Origin、Access-Control-Allow-Headers、Access-Control-Allow-Credentials - 确认实际 POST 请求的响应头也包含这些字段(中间件会自动补全)

















