Laravel+React项目CKEditor图片上传CORS跨域问题求助

问题核心 #

你的请求源是http://127.0.0.1:8000，但仅配置了http://localhost:8000为允许的跨域源——浏览器的同源策略会将这两个地址视为不同源，所以当前配置无法匹配请求，导致预检请求被拦截。

具体修复步骤 #

1. 更新Laravel的CORS配置
   打开config/cors.php，修改allowed_origins同时包含两个源（开发环境可临时用*，生产环境务必指定具体域名）：

   'allowed_origins' => ['http://localhost:8000', 'http://127.0.0.1:8000'],
   

   同时确保其他关键配置覆盖预检需求：

   'allowed_methods' => ['*'], // 允许所有请求方法，包含OPTIONS预检
   'allowed_headers' => ['*'], // 允许所有请求头
   'exposed_headers' => [],
   'max_age' => 0,
   'supports_credentials' => false,
   

2. 确保CORS中间件生效
   检查app/Http/Kernel.php，将CORS中间件添加到对应路由组（你的接口属于web路由组，需同步添加）：

   protected $middlewareGroups = [
       'web' => [
           // 其他已有中间件
           \Illuminate\Http\Middleware\HandleCors::class,
       ],
       'api' => [
           // 其他已有中间件
           \Illuminate\Http\Middleware\HandleCors::class,
       ],
   ];
   

3. 清除Laravel配置缓存
   修改配置后必须清除缓存才能生效，执行命令：

   php artisan config:clear
   php artisan cache:clear
   

4. 统一前后端请求域名（可选）
   将React项目的请求地址与运行地址统一，比如在Ckeditor.jsx的SimpleUploadAdapter配置中，确保上传接口域名和React项目地址一致：

   // Ckeditor.jsx配置示例
   SimpleUploadAdapterConfig: {
       uploadUrl: 'http://127.0.0.1:8000/admin/image-upload/', // 和React运行地址保持一致
   }
   

5. 验证响应头
   打开浏览器开发者工具的Network标签，查看OPTIONS预检请求的响应头，确认是否存在Access-Control-Allow-Origin字段，且值包含当前请求的源。

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