SpringBoot前后端接口对接常见错误小结

下面我来详细讲解“SpringBoot前后端接口对接常见错误小结”攻略。

一、问题概述

经常有开发者在使用SpringBoot进行前后端接口对接过程中，会遇到各种各样的问题，常见问题如下：

1. 跨域问题
2. 参数传递问题
3. JSON数据类型转换问题

二、解决方案

1. 跨域问题

跨域问题是非常常见的问题，解决方案有以下几种：

1.1 服务器端设置CORS

在SpringBoot的Controller层，使用@CrossOrigin注解即可跨域访问。如果需要全局设置跨域，则可以在配置类中添加以下内容：

@Configuration
public class CustomCorsConfiguration {
    @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurer() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {                 
                registry.addMapping("/**")
                        .allowedOrigins("*")
                        .allowedHeaders("*")
                        .allowedMethods("POST", "GET", "PUT", "OPTIONS", "DELETE")
                        .maxAge(3600)
                        .allowCredentials(true);
            }
        };
    }
}

1.2 使用nginx反向代理

在nginx.conf文件中添加以下配置：

location / {
    proxy_pass http://localhost:8080;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    # 添加以下两行配置
    add_header Access-Control-Allow-Origin *;
    add_header Access-Control-Allow-Headers X-Requested-With;
}

2. 参数传递问题

在前端发送POST请求时，常见的参数传递方式有以下两种：

2.1 请求体传参

将参数封装到请求体中，后端使用@RequestBody注解获取参数。例如：

axios.post('/api/login', {
    username: 'test',
    password: '123456'
}).then(response => { 
    console.log(response); 
})

后端接口Controller中使用@RequestBody注解处理参数：

@PostMapping("/login")
public Response login(@RequestBody LoginDTO loginDTO) {
    // 处理请求
}

2.2 url参数传参

将参数拼接到url中，后端使用@RequestParam注解获取参数。例如：

axios.post('/api/login?username=test&password=123456').then(response => {
    console.log(response);
})

后端接口Controller中使用@RequestParam注解处理参数：

@PostMapping("/login")
public Response login(@RequestParam String username, @RequestParam String password) {
    // 处理请求
}

3. JSON数据类型转换问题

在前端发送POST请求时，需要将参数以JSON格式传递给后端，解决方案有以下两种：

3.1 使用@RequestBody注解接收参数

前端将参数封装为JSON格式，后端直接使用@RequestBody注解接收参数即可。例如：

axios.post('/api/submit', {
    name: 'test',
    age: 18,
    address: 'Beijing'
}).then(response => {
    console.log(response);
})

后端接口Controller中使用@RequestBody注解处理参数：

@PostMapping("/submit")
public Response saveData(@RequestBody JSONObject json) {
    String name = json.getString("name");
    Integer age = json.getInteger("age");
    String address = json.getString("address");
    // 处理请求
}

3.2 使用@ModelAttribute注解接收参数

前端将参数转换为字符串，后端使用@ModelAttribute注解接收参数，并使用JSON.parse方法将JSON字符串转换为对象。例如：

axios.post('/api/submit', JSON.stringify({
    name: 'test',
    age: 18,
    address: 'Beijing'
})).then(response => {
    console.log(response);
})

后端接口Controller中使用@ModelAttribute注解处理参数：

@PostMapping("/submit")
public Response saveData(@ModelAttribute("json") String json) {
    JSONObject jsonObject = JSON.parseObject(json);
    String name = jsonObject.getString("name");
    Integer age = jsonObject.getInteger("age");
    String address = jsonObject.getString("address");
    // 处理请求
}

注意：需要在@RequestMapping中添加"produces = "application/json;charset=utf-8"，用于设置响应编码格式。

示例中代码仅供参考，具体实现要根据具体情况调整。

三、总结

以上就是SpringBoot前后端接口对接常见错误小结的解决方案，希望能对大家有所帮助。在使用SpringBoot进行前后端接口对接时，需要注意跨域、参数传递和JSON数据类型转换等问题，具体情况具体分析，选择最适合的解决方案。