React+Laravel Sanctum跨域CORS拦截问题求助

问题根源 #

当请求携带凭证（如Cookie）时，后端不能返回Access-Control-Allow-Origin: *，必须指定具体的前端域名，同时需要开启Access-Control-Allow-Credentials: true。Create React App的proxy配置会干扰Sanctum的CSRF Cookie交互流程，因此重点需要调整后端Laravel的CORS配置。

后端Laravel配置 #

1. 配置Sanctum信任的前端域名 #

修改config/sanctum.php中的stateful数组，添加你的前端域名：

'stateful' => explode(',', env('SANCTUM_STATEFUL_DOMAINS', sprintf(
    '%s%s',
    'localhost,localhost:3000,127.0.0.1,127.0.0.1:8000,::1',
    env('APP_URL') ? ','.parse_url(env('APP_URL'), PHP_URL_HOST) : ''
))),

或者直接在.env文件中指定：

SANCTUM_STATEFUL_DOMAINS=localhost:3000

2. 调整CORS中间件配置 #

修改config/cors.php：

• 确保paths包含Sanctum和Fortify的核心路由：

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

• 指定允许的前端域名（不能用通配符*）：

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

• 开启凭证支持：

  'allowed_credentials' => true,
  

• 确保allowed_methods和allowed_headers覆盖所需的请求方式和头部：

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

3. 确认中间件顺序 #

在app/Http/Kernel.php的api中间件组中，确保EnsureFrontendRequestsAreStateful中间件在限流中间件之前，且包含CORS中间件：

'api' => [
    \Laravel\Sanctum\Http\Middleware\EnsureFrontendRequestsAreStateful::class,
    'throttle:api',
    \Illuminate\Routing\Middleware\SubstituteBindings::class,
    \Illuminate\Http\Middleware\HandleCors::class,
],

前端React配置 #

1. 移除package.json中的proxy配置 #

该配置会干扰Sanctum的CSRF Cookie跨域设置流程，直接删除即可。

2. 正确配置react-sanctum #

在应用入口处指定后端基础URL：

import { Sanctum } from 'koole/react-sanctum';

function App() {
  return (
    <Sanctum
      baseUrl="http://localhost:8080"
      csrfCookieRoute="sanctum/csrf-cookie"
      loginRoute="login"
      logoutRoute="logout"
      userRoute="api/user"
    >
      {/* 你的应用组件 */}
    </Sanctum>
  );
}

3. 确保请求携带凭证 #

react-sanctum默认会开启withCredentials: true，如果自行封装请求，需手动添加该配置：

axios.get('/api/user', { withCredentials: true });

测试验证 #

1. 清除浏览器缓存与Cookie
2. 重启Laravel服务（php artisan serve或对应服务器）
3. 重启React开发服务器（npm start）

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