404通过ngForm将对象从angular发送到springboot的HttpErrorResponse_通过POST将数据从Angular发送到Springboot_在springboot中将post请求中的对象从angular发送到后端时出现问题 - 腾讯云开发者社区

基础概念

404 是一个HTTP状态码，表示“未找到”。当客户端请求的资源在服务器上不存在时，服务器会返回这个状态码。

ngForm 是Angular中的一个指令，用于创建一个表单控件，可以方便地进行表单验证和处理。

Spring Boot是一个用于简化Spring应用初始搭建以及开发过程的框架。

HttpErrorResponse 是Spring框架中的一个类，用于表示HTTP响应错误。

类型

客户端错误：如404，表示客户端请求的资源不存在。
服务器错误：如500，表示服务器内部错误。

应用场景

在Web应用中，当用户提交一个不存在的资源请求时，服务器会返回404状态码。例如，用户尝试访问一个不存在的页面或API。

问题原因及解决方法

问题原因

当通过ngForm将对象从Angular发送到Spring Boot时，如果服务器返回404错误，可能有以下原因：

URL路径错误：Angular前端发送请求的URL与Spring Boot后端配置的URL不匹配。
资源不存在：请求的资源在服务器上确实不存在。
后端服务未启动或配置错误：Spring Boot后端服务未正确启动或配置有误。

解决方法

检查URL路径：
- 确保Angular前端发送请求的URL与Spring Boot后端配置的URL完全匹配。
- 例如，如果Angular前端发送请求的URL是/api/data，那么Spring Boot后端的控制器应该配置为：
- 例如，如果Angular前端发送请求的URL是/api/data，那么Spring Boot后端的控制器应该配置为：

检查资源是否存在：
- 确保请求的资源在服务器上确实存在。
- 如果资源是动态生成的，确保生成逻辑正确。
检查后端服务：
- 确保Spring Boot后端服务已正确启动。
- 检查日志文件，查看是否有错误信息。
- 确保配置文件（如application.properties或application.yml）正确无误。

示例代码

Angular前端代码：

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-data-form',
  templateUrl: './data-form.component.html',
  styleUrls: ['./data-form.component.css']
})
export class DataFormComponent {
  dataForm: FormGroup;

  constructor(private fb: FormBuilder, private http: HttpClient) {
    this.dataForm = this.fb.group({
      name: ['', Validators.required],
      age: ['', Validators.required]
    });
  }

  onSubmit() {
    if (this.dataForm.valid) {
      this.http.post('/api/data', this.dataForm.value).subscribe(
        response => console.log(response),
        error => console.error(error)
      );
    }
  }
}

Spring Boot后端代码：

import org.springframework.web.bind.annotation.*;

@RestController
@RequestMapping("/api")
public class DataController {
    @PostMapping("/data")
    public ResponseEntity<?> postData(@RequestBody Data data) {
        // 处理数据
        return ResponseEntity.ok().build();
    }
}