如何从Laravel获取数据并在Angular中展示？二者如何通过API对接

一、Laravel 后端 API 配置（接口提供端） #

• 首先配置跨域规则：打开项目根目录下的config/cors.php文件，将paths数组修改为['api/*']表示所有API接口都开放跨域，allowed_origins数组填入Angular本地开发地址（默认是http://localhost:4200，生产环境替换为前端线上域名即可），再将supports_credentials参数设置为true，修改完成后执行php artisan config:cache刷新配置生效。
• 编写API路由：所有接口统一放在routes/api.php文件中，Laravel会自动给这部分路由加上/api前缀，示例测试接口如下：

Route::get('/test', function (\Illuminate\Http\Request $request) {
    return response()->json([
        'code' => 200,
        'msg' => '调用成功',
        'data' => ['content' => '测试返回数据']
    ]);
});

• 统一返回规范：所有接口都使用response()->json()返回JSON格式数据，提前约定好错误码规则（比如200为成功、401为未登录、403为权限不足、500为服务端错误），方便前端统一处理。
• （可选）身份验证选择：如果需要用户登录状态校验，推荐使用Laravel官方的Sanctum扩展生成Token，前端请求时在请求头中携带Authorization: Bearer {用户token}即可完成身份校验。

二、Angular 前端配置（接口调用端） #

• 配置环境变量：分别修改src/environments/environment.ts（开发环境）和environment.prod.ts（生产环境），统一配置后端API基础地址，示例如下：

export const environment = {
  production: false,
  apiBaseUrl: 'http://localhost:8000/api' // 生产环境替换为线上Laravel服务地址
};

• 封装通用API服务：执行CLI命令ng generate service services/api创建全局API服务，封装通用请求方法避免重复代码，示例代码如下：

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
import { environment } from '../../environments/environment';

@Injectable({
  providedIn: 'root'
})
export class ApiService {
  private baseUrl = environment.apiBaseUrl;
  // 统一配置请求头，需要传Token可以在这里统一拼接
  private headers = new HttpHeaders({
    'Content-Type': 'application/json'
  });

  constructor(private http: HttpClient) { }

  // 通用GET请求
  get(endpoint: string, params?: Record<string, any>) {
    let queryParams = new HttpParams();
    if (params) {
      Object.keys(params).forEach(key => queryParams = queryParams.set(key, params[key]));
    }
    return this.http.get(`${this.baseUrl}/${endpoint}`, { headers: this.headers, params: queryParams });
  }

  // 通用POST请求
  post(endpoint: string, data: Record<string, any>) {
    return this.http.post(`${this.baseUrl}/${endpoint}`, data, { headers: this.headers });
  }
}

• 依赖注册：打开app.module.ts文件，在imports数组中导入HttpClientModule，否则HttpClient依赖无法正常注入。
• 接口调用示例：在业务组件中注入ApiService即可调用接口，示例如下：

import { Component, OnInit } from '@angular/core';
import { ApiService } from '../services/api.service';

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html'
})
export class TestComponent implements OnInit {
  constructor(private apiService: ApiService) { }

  ngOnInit(): void {
    this.apiService.get('test').subscribe({
      next: (res: any) => {
        console.log('返回数据：', res.data);
      },
      error: (err) => {
        console.error('调用失败：', err.error.msg);
      }
    });
  }
}

• 优化建议：可以额外新增全局请求拦截器，统一处理401自动跳转登录页、500全局提示服务错误等逻辑，无需每个接口单独处理错误。

三、本地调试注意事项 #

• Laravel本地启动默认使用php artisan serve跑在8000端口，Angular本地启动默认使用ng serve跑在4200端口，确保跨域配置中的允许源地址和实际启动的前端地址端口一致。
• POST请求传递的参数在Laravel中可以通过$request->all()或者$request->input('字段名')接收，GET请求参数可以通过$request->query('字段名')接收。

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