使用更新组件时触发TypeError: Spread syntax迭代器相关报错求助

在使用更新组件时遇到以下错误，后端基于Laravel 9开发，推测问题出在前端，附前后端相关代码：

错误信息 #

TypeError: Spread syntax requires ...iterable[Symbol.iterator] to be a function
    at HttpHeaders.applyUpdate (http.mjs:244:22)
    at http.mjs:211:56
    at Array.forEach (<anonymous>)
    at HttpHeaders.init (http.mjs:211:33)
    at HttpHeaders.forEach (http.mjs:274:14)
    at Observable._subscribe (http.mjs:1811:25)
    at Observable._trySubscribe (Observable.js:37:25)
    at Observable.js:31:30
    at errorContext (errorContext.js:19:9)
    at Observable.subscribe (Observable.js:22:21)

相关代码 #

UpdateComponent.ts #

onSubmit(form:any){
    this._userService.update(this.token, this.user).subscribe(
      response => { 
        console.log(response)
      },
      error => {
        this.status = 'error'
        console.log(error)
      }
    )
}

ModelUser.ts #

export class User{
    constructor(
        public id: number,
        public name: string,
        public surname: string,
        public role: string,
        public email: string,
        public password: string,
        public description: string,
        public image: string
    ){}
}

UserService.ts #

update(token:any, user:any):Observable<any>{
        let json = JSON.stringify(user)
        let params = 'json=' + json
        let headers = new HttpHeaders().set('Content-Type', 'application/x-www-form-urlencoded').set('Authorization', token)

        return this._http.put(this.url + 'user/update', params, { headers: headers })
}

UserController.php（update方法） #

public function update(Request $request){
        
        //Recoger los datos por POST
        $json = $request->input('json', null);
        $params_array = json_decode($json, true);

        if($checkToken && !empty($params_array)){
            //Sacar usuario identificado
            $user = $jwtAuth->checkToken($token, true);

            //Validar los datos
            $validate = \Validator::make($params_array, [
                'name' => 'required|alpha',
                'surname' => 'required|alpha',
                'email' => 'required|email|unique:users,'.$user->sub
            ]);

            //Quitar los campos que no se actualizan
            unset($params_array['id']);
            unset($params_array['role']);
            unset($params_array['password']);
            unset($params_array['created_at']);
            unset($params_array['remember_token']);

            //Actualizar el usuario en la DB
            $user_update = User::where('id', $user->sub)->update($params_array);

            //Devolver array con resultado
            $data = array(
                'code' => 200,
                'status' => 'success',
                'user' => $user,
                'changes' => $params_array
            );
        }else{
            $data = array(
                'code' => 400,
                'status' => 'error',
                'message' => 'Usuario no identificado'
            );
        }

        return response()->json($data, $data['code']);
}

解决方案 #

错误核心原因 #

这个错误是因为HttpHeaders处理Authorization头时，传入的token不是合法的可迭代类型（正常应为字符串）。当调用set('Authorization', token)时，如果token是对象、undefined或其他非字符串类型，Angular的HttpHeaders内部处理头信息时会触发Spread语法的迭代错误。

具体修复步骤 #

1. 确保token为纯字符串格式
   检查组件中this.token的值，确认它是纯字符串（比如JWT令牌）；如果它是包含token属性的对象，需要提取字符串值，示例：

   // 若this.token格式为{ token: "xxx..." }
   this._userService.update(this.token.token, this.user).subscribe(...)
   

2. 规范HttpHeaders与参数的构建
   改用对象字面量初始化HttpHeaders，同时给token参数指定类型避免传入错误值，推荐用HttpParams构建urlencoded参数：

   update(token: string, user: User):Observable<any>{
       let json = JSON.stringify(user);
       let params = new HttpParams().set('json', json);
       let headers = new HttpHeaders({
           'Content-Type': 'application/x-www-form-urlencoded',
           'Authorization': token
       });
   
       return this._http.put(`${this.url}user/update`, params, { headers });
   }
   

3. 后端补充变量定义（可选）
   后端代码中$checkToken和$token变量未定义，需补充获取逻辑：

   public function update(Request $request){
       $token = $request->header('Authorization');
       $checkToken = $jwtAuth->checkToken($token);
       
       // 剩余原有代码...
   }
   

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