Angular前端无法更新Laravel API中Employee关联的Salary模型问题排查

问题背景 #

Angular应用连接Laravel API，Employee与Salary为一对多关联。通过Angular更新时，Employee数据可正常更新，但Salary无法更新；使用Postman调用API则两者均可正常更新。过程中先后遇到422 Unprocessable Content验证错误和CORS Missing Allow Origin跨域错误。

相关代码 #

Laravel 模型代码 #

Employee.php

protected $fillable = ['birth_date','first_name','last_name','gender','hire_date'];

protected $primaryKey = 'emp_no';

public function salaries(): HasMany
{
    return $this->hasMany(Salary::class, 'emp_no','emp_no');
}

Salary.php

protected $fillable = ['salary','from_date','to_date'];

public function employee(): BelongsTo
{
    return $this->belongsTo(Employee::class, 'emp_no');
}

Laravel 控制器代码（EmployeeController.php） #

public function updateEmployee(Request $request, $id)
{
    $employee = Employee::find($id);

    if (is_null($employee)) {
        return response()->json(['message' => 'Employee not found'], 404);
    }
 $employee->update($request->validate([
        'emp_no' => 'required',
        'first_name' => 'required',
        'last_name' => 'required',
        'gender' => 'required',
        'hire_date' => 'required'
]));
$employee->salaries()->update($request->validate([
'emp_no' => 'required',
        'salary' => 'required',
        'from_date' => 'required',
        'to_date' => 'required'

    ]));
    return response($employee, 200);
}

Laravel API 路由 #

Route::put('updateEmployee/{id}','App\Http\Controllers\EmployeeController@updateEmployee');

Angular 代码 #

data.service.ts

updateData(id: string, data: any) {
    return this.httpClient.put('http://127.0.0.1:8000/api/updateEmployee/'+id, data);
}

employee-edit.component.ts

updateEmployee() {
    this.dataService.updateData(this.id, this.employee).subscribe(res => {
        this.data = res;
        this.employee = this.data;
        console.log(res);
    })
}

错误信息 #

1. 初始验证错误：

   Object { headers: {…}, status: 422, statusText: "Unprocessable Content", url: "http://127.0.0.1:8000/api/updateEmployee/1", ok: false, name: "HttpErrorResponse", message: "Http failure response for http://127.0.0.1:8000/api/updateEmployee/1: 422 Unprocessable Content", error: {…} }
   

2. 后续跨域错误：

   XHRPUT http://127.0.0.1:8000/api/updateEmployee/1
   CORS Missing Allow Origin
   
   Response body is not available to scripts (Reason: CORS Missing Allow Origin)
   Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://127.0.0.1:8000/api/updateEmployee/1. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 500.
   ERROR Object { headers: {…}, status: 0, statusText: "Unknown Error", url: "http://127.0.0.1:8000/api/updateEmployee/1", ok: false, name: "HttpErrorResponse", message: "Http failure response for http://127.0.0.1:8000/api/updateEmployee/1: 0 Unknown Error", error: error }
   

问题原因与解决方案 #

1. CORS 跨域问题 #

原因：Laravel API 未配置允许 Angular 前端的跨域请求，浏览器的同源策略拦截了请求。

解决步骤：

• 安装 Laravel CORS 扩展包：

  composer require barryvdh/laravel-cors
  

• 发布配置文件：

  php artisan vendor:publish --provider="Barryvdh\Cors\ServiceProvider"
  

• 修改 config/cors.php 配置，允许 Angular 前端地址（如 http://localhost:4200）：

  'allowed_origins' => ['http://localhost:4200'],
  'allowed_methods' => ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'],
  'allowed_headers' => ['*'],
  

• 在 app/Http/Kernel.php 的 api 中间件组中添加 CORS 处理中间件：

  protected $middlewareGroups = [
      'api' => [
          \Barryvdh\Cors\HandleCors::class,
          // 其他中间件...
      ],
  ];
  

2. Salary 更新参数不匹配问题 #

原因：Postman 请求时直接将 salary、from_date、to_date 放在请求顶层，但 Angular 发送的 salary 数据嵌套在 salaries 数组中，Laravel 控制器尝试从请求顶层获取这些字段，导致验证失败（422 错误）。

解决步骤：

方案一：调整 Laravel 控制器逻辑，适配前端嵌套参数

修改控制器中的 Salary 更新部分，从 salaries 数组中提取数据并更新：

public function updateEmployee(Request $request, $id)
{
    $employee = Employee::find($id);

    if (is_null($employee)) {
        return response()->json(['message' => 'Employee not found'], 404);
    }

    // 更新 Employee 数据
    $employee->update($request->validate([
        'emp_no' => 'required',
        'first_name' => 'required',
        'last_name' => 'required',
        'gender' => 'required',
        'hire_date' => 'required'
    ]));

    // 处理 Salary 更新：验证嵌套的 salaries 字段
    $salaryValidation = $request->validate([
        'salaries.*.salary' => 'required|numeric',
        'salaries.*.from_date' => 'required|date',
        'salaries.*.to_date' => 'required|date',
    ]);

    // 假设更新第一个薪资记录（根据业务需求调整，比如按 ID 更新）
    if (!empty($salaryValidation['salaries'])) {
        $firstSalary = $employee->salaries()->first();
        if ($firstSalary) {
            $firstSalary->update($salaryValidation['salaries'][0]);
        }
    }

    // 如果需要批量更新所有薪资，使用以下代码：
    // $employee->salaries()->update($salaryValidation['salaries'][0]);

    return response($employee->load('salaries'), 200);
}

方案二：调整 Angular 前端请求参数结构

在发送请求前，将 salaries 数组中的字段提取到请求顶层（和 Postman 请求格式一致）：

updateEmployee() {
    // 提取薪资数据到顶层
    const requestData = {
        ...this.employee,
        salary: this.employee.salaries[0].salary,
        from_date: this.employee.salaries[0].from_date,
        to_date: this.employee.salaries[0].to_date
    };
    // 删除嵌套的 salaries 字段（可选）
    delete requestData.salaries;

    this.dataService.updateData(this.id, requestData).subscribe(res => {
        this.data = res;
        this.employee = this.data;
        console.log(res);
    })
}

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