Laravel10配置cors怎么配置Vue前端-php教程-PHP中文网

laravel 10 默认不启用 cors，需通过 fruitcake/laravel-cors 包配置：安装后发布 cors.php，设置 paths、allowed_origins（不可为 * 当 supports_credentials=true 时）、supports_credentials=true，并确保 handlecors 已注入 api 中间件组。

laravel10配置cors怎么配置vue前端

Laravel 10 默认不启用 CORS，当 Vue 前端（如运行在 http://localhost:5173 或 http://localhost:3000）调用 Laravel API（如 http://localhost:8000/api/posts）时，浏览器会因同源策略拦截请求——这时必须显式配置跨域支持。

✅ 推荐方式：使用 `fruitcake/laravel-cors`（官方推荐，Laravel 10 兼容）

该包已深度集成进 Laravel 10+ 生态，比手动写中间件更安全、更灵活。

1. 安装扩展包

composer require fruitcake/laravel-cors

Laravel 10.42+ 会自动注册服务提供者，无需手动添加；若版本较早或未生效，检查 config/app.php 中是否含：

Fruitcake\Cors\CorsServiceProvider::class,

2. 发布并编辑配置文件

php artisan vendor:publish --tag="cors"

生成 config/cors.php，按需修改关键项：

前端美化

使用此技能可创建独具特色、具备生产级质量的前端界面，设计品质高。当用户要求构建网页组件、页面、产物、海报或应用程序时（例如：网站、落地页、仪表盘、React 组件、HTML/CSS 布局，或对任意 Web UI 进行样式优化与视觉美化），请启用该能力。输出需为富有创意、精雕细琢的代码与 UI 设计，避免千篇一律的 AI 风格。

下载

return [
    'paths' => ['api/*', 'sanctum/csrf-cookie'], // 允许跨域的路由前缀
    'allowed_methods' => ['*'],                   // 支持 GET/POST/PUT/DELETE 等
    'allowed_origins' => ['http://localhost:5173', 'http://localhost:3000', 'https://your-vue-app.com'],
    'allowed_origins_patterns' => [],             // 可用正则，如 ['https://*.example.com']
    'allowed_headers' => ['*'],                   // 允许前端携带的请求头
    'exposed_headers' => [],                      // 需暴露给 JS 的响应头（如 X-Total-Count）
    'max_age' => 3600,
    'supports_credentials' => true,               // ⚠️ 必须开启才能传 Cookie 或 Authorization
];

? 关键提醒：

若 Vue 使用 withCredentials: true（例如 Axios 配置了 credentials: 'include'），supports_credentials 必须为 true，且 allowed_origins *不能是 `['']`**（浏览器禁止），必须写明确域名。

paths 中包含 sanctum/csrf-cookie 是为了配合 Sanctum 的 CSRF 防护流程（登录前先获取 cookie）。

3. 确保 API 路由组应用了 cors 中间件
Laravel 10 默认 api.php 路由已自动应用 api 中间件组，而 cors 已被注入该组（查看 app/Http/Kernel.php 中 api 键）：

'api' => [
    \Illuminate\Routing\Middleware\ThrottleRequests::class.':api',
    \Illuminate\Routing\Middleware\SubstituteBindings::class,
    \Fruitcake\Cors\HandleCors::class, // ← 这行必须存在
],

无需额外 ->middleware('cors')。

? Vue 前端配合要点（以 Axios 为例）

在 src/main.js 或请求封装处统一设置：

import axios from 'axios'

// 开发环境指向本地 Laravel API
axios.defaults.baseURL = 'http://localhost:8000/api'
axios.defaults.withCredentials = true // 同步 Cookie 和认证凭证

// 若使用 Sanctum，登录后 Token 存 localStorage，后续请求带 Bearer
axios.interceptors.request.use(config => {
  const token = localStorage.getItem('token')
  if (token) {
    config.headers.Authorization = `Bearer ${token}`
  }
  return config
})

? 验证是否生效

打开浏览器开发者工具 → Network → 查看任意 API 请求的 Response Headers，应含：

Access-Control-Allow-Origin: http://localhost:5173
Access-Control-Allow-Credentials: true
Access-Control-Allow-Headers: *

若仍报错，检查：
- Laravel 是否正在运行（php artisan serve）
- Vue 是否访问的是正确 API 地址（非 http://localhost:8000 页面本身）
- .env 中 SESSION_DOMAIN 和 SANCTUM_STATEFUL_DOMAINS 是否配置正确（尤其生产多域名时）