将JSON从AngularJS传递到Springboot RestController不起作用

基础概念

JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成。AngularJS 是一个前端 JavaScript 框架，用于构建单页应用程序。Spring Boot 是一个用于简化 Spring 应用程序初始搭建以及开发过程的框架，其中的 RestController 用于处理 RESTful Web 服务请求。

相关优势

• JSON：易于阅读和编写，跨语言支持，广泛用于网络数据交换。
• AngularJS：提供了丰富的功能来构建动态的单页应用程序。
• Spring Boot：简化了 Spring 应用的配置和部署，提供了快速开发的能力。

类型

• AngularJS 传递 JSON：通常通过 HTTP 请求（如 POST 请求）将数据作为请求体发送。
• Spring Boot RestController 接收 JSON：通过注解 @RequestBody 来接收前端发送的 JSON 数据。

应用场景

在现代 Web 开发中，前端框架（如 AngularJS）与后端服务（如 Spring Boot）之间的数据交换通常使用 JSON 格式进行。

问题分析

当 JSON 数据从 AngularJS 传递到 Spring Boot RestController 不起作用时，可能的原因包括：

1. 请求头设置不正确：AngularJS 发送的请求头中必须包含 Content-Type: application/json。
2. 数据格式问题：发送的 JSON 数据格式必须正确，且与后端接收的数据模型匹配。
3. 后端注解问题：Spring Boot 的 RestController 中必须使用 @RequestBody 注解来接收 JSON 数据。
4. 跨域问题：如果前端和后端不在同一个域上，可能会遇到跨域资源共享（CORS）问题。

解决方法

1. 确保请求头设置正确

在 AngularJS 中发送 POST 请求时，确保设置了正确的请求头：

$http({
    method: 'POST',
    url: '/api/data',
    data: JSON.stringify(yourData),
    headers: {
        'Content-Type': 'application/json'
    }
}).then(function(response) {
    // 处理成功响应
}, function(error) {
    // 处理错误响应
});

2. 确保数据格式正确

确保发送的 JSON 数据格式正确，并且与后端接收的数据模型匹配。例如，如果后端期望一个包含 name 和 age 的对象，前端发送的数据应该是：

{
    "name": "John",
    "age": 30
}

3. 使用 @RequestBody 注解

在 Spring Boot 的 RestController 中，使用 @RequestBody 注解来接收 JSON 数据：

@RestController
@RequestMapping("/api")
public class DataController {

    @PostMapping("/data")
    public ResponseEntity<?> receiveData(@RequestBody YourDataModel data) {
        // 处理接收到的数据
        return ResponseEntity.ok().build();
    }
}

4. 处理跨域问题

如果前端和后端不在同一个域上，可以在 Spring Boot 中配置 CORS：

@Configuration
public class WebConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")
                .allowedHeaders("*")
                .allowCredentials(true);
    }
}

参考链接

• AngularJS $http Service
• Spring Boot RestController
• Spring Boot CORS Configuration

通过以上步骤，你应该能够解决 JSON 数据从 AngularJS 传递到 Spring Boot RestController 不起作用的问题。