Angular中HttpClient POST请求因CORS问题无法发起的求助

我之前对接Angular和Laravel API时也踩过一模一样的CORS坑，你的中间件代码明显没写完，而且漏掉了几个关键响应头，这大概率就是问题所在。给你整理几个必做的修复步骤：

1. 补全并修正Laravel的CORS中间件 #

你的代码里Acces...是截断状态，而且缺少了跨域核心的源授权、方法允许以及预检请求处理。替换成下面完整的中间件代码：

<?php

namespace App\Http\Middleware;

use Closure;
use Illuminate\Http\Request;

class Cors
{
    /**
     * Handle an incoming request.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \Closure(\Illuminate\Http\Request): (\Illuminate\Http\Response|\Illuminate\Http\RedirectResponse)  $next
     * @return \Illuminate\Http\Response|\Illuminate\Http\RedirectResponse
     */
    public function handle(Request $request, Closure $next)
    {
        // 生产环境建议设为具体前端域名，比如http://localhost:4200，*是允许所有源（测试用）
        $allowOrigin = $request->header('Origin') ?? '*';
        
        $response = $next($request);
        
        // 配置核心CORS响应头
        $response->header('Access-Control-Allow-Origin', $allowOrigin)
                 ->header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS')
                 ->header('Access-Control-Allow-Headers', 'X-Requested-With, Content-Type, Authorization')
                 ->header('Access-Control-Allow-Credentials', 'true');

        // 处理浏览器预检OPTIONS请求，直接返回200
        if ($request->isMethod('OPTIONS')) {
            return response()->json(['status' => 'preflight ok'], 200);
        }

        return $response;
    }
}

2. 注册中间件 #

写完中间件后，要在app/Http/Kernel.php里完成注册：

• 全局应用到所有路由：加到$middleware数组

protected $middleware = [
    // ...其他默认中间件
    \App\Http\Middleware\Cors::class,
];

• 仅给API路由组用：加到$middlewareGroups的api数组

protected $middlewareGroups = [
    'api' => [
        // ...其他API中间件（比如throttle）
        \App\Http\Middleware\Cors::class,
    ],
];

3. 排除API路由的CSRF验证 #

Laravel默认会对POST请求做CSRF校验，但API接口不需要这个，所以在app/Http/Middleware/VerifyCsrfToken.php里把API路由排除：

protected $except = [
    '/api/*', // 所有API路径都跳过CSRF验证
];

4. 检查Angular HttpClient的请求配置 #

如果你的请求带了认证token或需要传递凭证，要确保Angular请求开启withCredentials：

import { HttpClient } from '@angular/common/http';

// 在你的服务类中
constructor(private http: HttpClient) {}

submitData(data: any) {
    return this.http.post('http://你的LaravelAPI地址/api/接口路径', data, {
        withCredentials: true, // 和后端的Access-Control-Allow-Credentials对应
        headers: {
            'Content-Type': 'application/json' // 避免因Content-Type触发额外预检
        }
    });
}

最后验证 #

做完这些后重启Laravel服务，再发起Angular请求试试。如果还是不行，打开浏览器开发者工具的Network面板，查看OPTIONS预检请求的响应头，确认我们设置的CORS字段是否都存在，这样能快速定位哪里配置漏了。

内容的提问来源于stack exchange，提问作者Wai Yan Hein