Laravel 11本地环境与Svelte集成时的CORS跨域问题求助

核心问题分析 #

你的配置存在两处关键冲突，导致浏览器的CORS校验失败：

1. CORS规范冲突：自定义中间件中开启了Access-Control-Allow-Credentials: true，但cors.php里allowed_origins设为*——根据CORS规则，当允许携带凭证时，Access-Control-Allow-Origin不能是通配符*，必须指定具体域名。
2. 重复配置冲突：Laravel默认通过fruitcake/laravel-cors包处理CORS，自定义的CORS中间件会和官方配置重复设置响应头，导致浏览器解析混乱。

分步解决方案 #

1. 移除自定义CORS中间件

Laravel自带的CORS处理已经足够，无需额外自定义中间件，避免重复设置：

• 打开bootstrap/app.php，删除api中间件组里的CorsMiddleware::class配置：

// 删掉这一段
$middleware->api(
   append: [CorsMiddleware::class]
);

2. 统一CORS配置文件

修改config/cors.php，确保配置符合CORS规范：

return [
    'paths' => ['api/*', 'sanctum/csrf-cookie'],
    'allowed_methods' => ['*'],
    'allowed_origins' => ['*'], // 如果不需要携带凭证，用*没问题
    'allowed_origins_patterns' => [],
    'allowed_headers' => ['*'],
    'exposed_headers' => [],
    'max_age' => 3600, // 延长预检缓存时间，减少重复请求
    'supports_credentials' => false, // 和allowed_origins: * 保持一致，设为false
];

如果你后续需要携带凭证（比如Cookie），把allowed_origins改成Svelte项目的具体域名（如http://localhost:5173），再把supports_credentials设为true。

3. 清除Laravel配置缓存

Laravel会缓存配置文件，修改后必须清除缓存才能生效：

php artisan config:clear

4. 简化Svelte请求代码

不需要额外设置Accept头（浏览器会自动处理），保持请求简洁：

async function fetchData() {
    try {
        const response = await fetch('http://127.0.0.1:8000/api/endpoint');
        if (!response.ok) throw new Error(`HTTP error! Status: ${response.status}`);
        data = await response.json();
        console.log(data);
    } catch (err) {
        error = err.message;
    }
}

验证步骤 #

1. 重启Laravel服务：php artisan serve
2. 重启Svelte开发服务器
3. 再次调用API，查看浏览器控制台是否还存在CORS错误

内容的提问来源于stack exchange，提问作者Carlos Araújo