Laravel 9 + Vue 3跨域问题：Access-Control-Allow-Origin缺失求助

一、确认fruitcake/laravel-cors配置及生效状态 #

• 检查服务提供者注册：确认config/app.php的providers数组中已添加Fruitcake\Cors\CorsServiceProvider::class
• 验证CORS配置规则：打开config/cors.php，重点核对以下项：
  • paths：需覆盖你的API路由前缀（如['api/*']）
  • allowed_origins：明确指定前端域名（如['http://localhost:5173', 'http://127.0.0.1:5173']，测试阶段可临时设为['*']）
  • allowed_methods：包含请求使用的HTTP方法（如['POST', 'GET']，或直接设为['*']）
  • allowed_headers：允许请求携带的头信息（如['Content-Type']，或['*']）
• 确认中间件应用：在app/Http/Kernel.php中，将\Fruitcake\Cors\HandleCors::class添加到$middleware全局中间件数组（而非仅路由组）
• 清除配置缓存：执行命令php artisan config:clear，避免旧配置缓存导致新规则不生效

二、检查Vue fetch请求的合规性 #

• 确保请求模式与头信息正确：fetch请求需明确CORS模式，并携带符合后端要求的头信息，示例代码：

async submitForm() {
  try {
    const res = await fetch('http://localhost:8000/api/submit', {
      method: 'POST',
      mode: 'cors',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ formData: this.form })
    });
    const data = await res.json();
    console.log(data);
  } catch (err) {
    console.error(err);
  }
}

• 查看预检请求状态：打开Firefox开发者工具「网络」面板，检查是否有OPTIONS预检请求，其状态码应为204；若预检请求失败，优先排查后端CORS配置是否允许OPTIONS方法

三、排查服务器层面的CORS拦截 #

• Nginx配置：若使用Nginx部署，检查站点配置文件是否手动添加了Access-Control-Allow-Origin等CORS头，此类配置会与laravel-cors的输出冲突，需删除或统一由Laravel处理
• Apache配置：检查.htaccess或服务器全局配置中是否存在CORS相关规则，同理需避免与Laravel的CORS中间件重复配置

四、验证路由与控制器的响应逻辑 #

• 路由中间件冲突：确认API路由未被其他拦截型中间件（如auth:sanctum）提前阻断，若前端未携带认证凭证，需调整路由中间件规则或确保认证失败时仍返回CORS头
• 控制器响应头：避免在控制器中手动设置Access-Control-Allow-Origin等头信息，防止覆盖laravel-cors自动生成的合规头

内容的提问来源于stack exchange，提问作者Just-a-beginner