Laravel9+Vue3 Sanctum SPA本地环境CORS失败问题求助

一、Apache 虚拟主机 CORS 配置检查 #

Apache 层面的 CORS 拦截可能会覆盖 Laravel 的配置，需在后端虚拟主机配置中添加以下规则：

• 打开后端虚拟主机配置文件（通常在 /etc/httpd/conf.d/ 目录下），在 <VirtualHost> 块内添加：

Header always set Access-Control-Allow-Origin "http://你的前端域名"
Header always set Access-Control-Allow-Methods "POST, GET, OPTIONS, PUT, DELETE"
Header always set Access-Control-Allow-Headers "X-Requested-With, Content-Type, Authorization, X-XSRF-TOKEN"
Header always set Access-Control-Allow-Credentials "true"

# 处理预检 OPTIONS 请求
RewriteEngine On
RewriteCond %{REQUEST_METHOD} OPTIONS
RewriteRule ^(.*)$ $1 [R=200,L]

• 保存后重启 Apache：sudo systemctl restart httpd

二、Laravel 核心配置复核 #

重点确认以下关键配置项：

1. .env 文件
   确保会话和 Sanctum 域名配置正确：

   SESSION_DOMAIN=.你的根域名（如 .local.test）
   SANCTUM_STATEFUL_DOMAINS=前端域名（如 frontend.local.test）,localhost:3000
   APP_URL=http://后端域名
   

2. config/cors.php
   调整路径、允许源和凭证支持：

   return [
       'paths' => ['api/*', 'sanctum/csrf-cookie', 'login', 'logout'],
       'allowed_origins' => ['http://前端域名'],
       'allowed_methods' => ['*'],
       'allowed_headers' => ['*'],
       'supports_credentials' => true,
   ];
   

3. app/Http/Kernel.php
   确保 API 中间件组包含 Sanctum 状态检查中间件，且顺序在节流中间件之前：

   protected $middlewareGroups = [
       'api' => [
           \Laravel\Sanctum\Http\Middleware\EnsureFrontendRequestsAreStateful::class,
           'throttle:api',
           \Illuminate\Routing\Middleware\SubstituteBindings::class,
       ],
   ];
   

三、前端请求配置修正 #

Vue 端需确保请求携带凭证并正确获取 CSRF 令牌：

• 若使用 Axios，全局开启凭证携带：

import axios from 'axios';

axios.defaults.withCredentials = true;
axios.defaults.baseURL = 'http://后端域名/api';

• 登录前先请求 CSRF 令牌接口：

async function handleLogin(formData) {
  await axios.get('/sanctum/csrf-cookie');
  const res = await axios.post('/login', formData);
  // 处理登录结果
}

四、系统层面校验 #

• 确认 Fedora 防火墙允许 HTTP 流量：sudo firewall-cmd --add-service=http --permanent && sudo firewall-cmd --reload
• 使用浏览器隐私模式测试，避免旧缓存/ Cookie 干扰

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