如何解决Laravel中http://localhost:3000到8000的CORS跨域阻塞问题

当从http://localhost:3000向http://localhost:8000/home（由http://localhost:8000/login重定向而来）发起请求时，触发CORS策略错误，提示预检响应缺少Access-Control-Allow-Origin头，请求被阻塞。

当前配置 #

Laravel cors.php 文件 #

'paths' => ['api/*', '/login', 'sanctum/csrf-cookie'],

'allowed_methods' => ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS', 'PATCH'],

'allowed_origins' => ['http://localhost:3000'],

'allowed_origins_patterns' => [],

'allowed_headers' => ['*'],

'exposed_headers' => [],

'max_age' => 0,

'supports_credentials' => true,

React Axios 配置 #

import Axios from "axios";

const axios = Axios.create({
  baseURL: "http://localhost:8000",
  withCredentials: true,
  xsrfCookieName: "XSRF-TOKEN",
  xsrfHeaderName:"X-XSRF-TOKEN",
  headers: {
    'X-Requested-With': 'XMLHttpRequest'
  },
});

解决方案 #

• 添加重定向路径到CORS允许列表
  当前paths数组仅包含/login，但重定向后的/home未被纳入，导致预检请求失败。修改cors.php的paths项：

  'paths' => ['api/*', '/login', '/home', 'sanctum/csrf-cookie'],
  

  若有多个需允许的路径，可使用通配符/*（生产环境谨慎使用），或明确列出所有涉及的路由路径。

• 确认CORS中间件加载
  检查app/Http/Kernel.php的middlewareGroups，确保web和api中间件组包含\Illuminate\Http\Middleware\HandleCors::class：

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

• 清除配置缓存
  修改cors.php后，需清除Laravel配置缓存使新设置生效：

  php artisan config:clear
  php artisan cache:clear
  

• 检查重定向响应头（可选）
  若/login的重定向为手动控制器逻辑，确保重定向响应携带CORS头。通常CORS中间件会自动处理所有响应，包括重定向。

• 验证预检请求
  用浏览器开发者工具查看OPTIONS预检请求的响应头，确认Access-Control-Allow-Origin包含http://localhost:3000，且其他必要CORS头存在。

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