Laravel9+Angular14跨域请求遭CORS策略拦截问题求助

核心问题定位 #

看报错信息的关键细节：

Access to XMLHttpRequest at 'localhost:8000/api/formations/' from origin 'http://localhost:4200' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.

你的请求地址localhost:8000/api/formations/缺少http://协议前缀，浏览器会将其识别为非HTTP协议的地址，直接触发协议不支持的CORS拦截——这也是你用在线工具测试正常（工具会自动补全协议），但应用报错的原因。

分步解决方案 #

1. 修复Angular请求地址 #

检查Angular代码中HttpClient的请求写法，确保添加完整的HTTP协议：

// 错误写法
this.http.get('localhost:8000/api/formations/');

// 正确写法
this.http.get('http://localhost:8000/api/formations/');

建议用环境变量统一管理API地址，避免重复出错：
在src/environments/environment.ts中配置：

export const environment = {
  production: false,
  apiBaseUrl: 'http://localhost:8000/api'
};

请求时调用：

this.http.get(`${environment.apiBaseUrl}/formations/`);

2. 改用Laravel自带CORS配置（替代自定义中间件） #

Laravel 9内置了CORS处理，无需自定义中间件，修改config/cors.php即可：

return [
    'paths' => ['api/*'],
    'allowed_methods' => ['*'],
    'allowed_origins' => ['http://localhost:4200'], // 精准指定前端地址，比*更安全
    'allowed_origins_patterns' => [],
    'allowed_headers' => ['*'],
    'exposed_headers' => [],
    'max_age' => 3600,
    'supports_credentials' => false,
];

确保app/Http/Kernel.php的全局中间件中包含HandleCors：

protected $middleware = [
    // ...其他中间件
    \Illuminate\Http\Middleware\HandleCors::class,
];

完成后，删除你之前自定义的Cors中间件、Kernel.php中的路由中间件注册，以及routes/api.php中的cors中间件引用，避免配置冲突。

3. 验证Apache配置（若用XAMPP运行Laravel） #

如果你通过XAMPP的Apache运行Laravel，需确保mod_headers模块已开启：
打开xampp\apache\conf\httpd.conf，找到#LoadModule headers_module modules/mod_headers.so，去掉前面的#注释，重启Apache服务。

4. 清理缓存并重启服务 #

• 清除浏览器缓存，或用无痕模式测试，避免旧缓存干扰
• 重启Laravel服务：php artisan serve
• 重启Angular服务：ng serve

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