Angular(ngx-admin)+Laravel全栈开发CORS错误修复及JWT登录咨询

一、Laravel后端配置 #

1. 配置CORS规则 #

编辑项目根目录下的config/cors.php，根据实际场景调整参数：

return [
    'paths' => ['api/*', 'login', 'logout'], // 包含JWT登录、退出等需跨域的路由
    'allowed_methods' => ['*'], // 允许所有请求方法，也可指定GET/POST/PUT/DELETE
    'allowed_origins' => ['http://localhost:4200'], // 替换为你的Angular前端地址，生产环境用实际域名
    'allowed_origins_patterns' => [],
    'allowed_headers' => ['*'], // 包含JWT需要的Authorization、Content-Type等头
    'exposed_headers' => ['Authorization'], // 暴露Authorization头，让前端能获取返回的JWT Token
    'max_age' => 3600, // 预检请求缓存时长
    'supports_credentials' => true, // 按需开启，JWT场景通常无需携带Cookie
];

2. 启用CORS中间件 #

打开app/Http/Kernel.php，确保HandleCors中间件已加入api中间件组：

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

3. JWT登录接口配置 #

确保登录接口返回正确响应，示例控制器代码：

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;

public function login(Request $request)
{
    $credentials = $request->only('email', 'password');
    
    if (! $token = Auth::attempt($credentials)) {
        return response()->json(['error' => 'Unauthorized'], 401);
    }
    
    return response()->json([
        'access_token' => $token,
        'token_type' => 'Bearer',
        'expires_in' => auth()->factory()->getTTL() * 60
    ]);
}

二、Angular（ngx-admin）前端配置 #

1. 配置API地址 #

在src/environments/environment.ts中定义后端API地址：

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

2. 实现登录请求 #

在登录组件中发送POST请求到后端登录接口：

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

constructor(private http: HttpClient) {}

login(email: string, password: string) {
    return this.http.post(`${environment.apiBaseUrl}/login`, { email, password });
}

3. 添加JWT请求拦截器 #

创建拦截器自动在请求头携带JWT Token：

// src/app/auth.interceptor.ts
import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler } from '@angular/common/http';

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
    intercept(req: HttpRequest<any>, next: HttpHandler) {
        const token = localStorage.getItem('access_token');
        if (token) {
            const authReq = req.clone({
                headers: req.headers.set('Authorization', `Bearer ${token}`)
            });
            return next.handle(authReq);
        }
        return next.handle(req);
    }
}

在app.module.ts中注册拦截器：

import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { AuthInterceptor } from './auth.interceptor';

@NgModule({
    ...
    providers: [
        {
            provide: HTTP_INTERCEPTORS,
            useClass: AuthInterceptor,
            multi: true
        }
    ]
})
export class AppModule {}

三、验证修复 #

1. 重启Laravel服务和Angular开发服务器
2. 发起登录请求，检查浏览器控制台是否消除CORS错误
3. 确认登录成功后，后续请求自动携带JWT Token且接口正常响应

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