注册时遇CORS跨域错误：请求资源无Access-Control-Allow-Origin头

先看两个核心问题：请求URL拼写错误，以及Laravel缺少正确的跨域配置，按以下步骤逐一修复：

1. 修复前端请求地址错误 #

报错里的请求地址是http://localhost:8000/localhost:8000/api/register，明显是前端请求URL重复嵌套了域名。修改React组件的registerSubmit方法：

把错误的请求代码：

axios.post(`localhost:8000/api/register`, data)

改成：

axios.post(`http://localhost:8000/api/register`, data)

优化建议：给axios设置全局baseURL，避免重复写域名。在项目入口文件（如index.js或App.js）添加：

import axios from 'axios';
axios.defaults.baseURL = 'http://localhost:8000';

之后请求可简化为：

axios.post('/api/register', data)

2. 配置Laravel跨域支持（适配Sanctum） #

2.1 确认CORS包（Laravel 8+默认已包含） #

如果项目没有fruitcake/laravel-cors，执行安装：

composer require fruitcake/laravel-cors

2.2 修改config/cors.php #

确保配置允许前端域名、支持凭证传递：

return [
    'paths' => ['api/*', 'sanctum/csrf-cookie'],
    'allowed_methods' => ['*'],
    'allowed_origins' => ['http://localhost:5173'],
    'allowed_origins_patterns' => [],
    'allowed_headers' => ['*'],
    'exposed_headers' => [],
    'max_age' => 0,
    'supports_credentials' => true, // 必须设为true，因为要传递CSRF Cookie
];

2.3 配置Sanctum状态域名 #

修改config/sanctum.php，在stateful数组中添加前端端口：

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

2.4 更新.env文件 #

添加或修改以下配置：

SANCTUM_STATEFUL_DOMAINS=localhost:5173
SESSION_DOMAIN=localhost

2.5 调整中间件顺序 #

在app/Http/Kernel.php的api中间件组中，确保HandleCors中间件排在最前面：

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

3. 修复后端控制器的小错误 #

后端验证失败时的messages()调用缺少实例对象，修改为：

if($validator->fails()){
    return response()->json(['validation_errors' => $validator->messages()]);
}

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