SpringBoot中表单提交报错“Content type ‘application/x-www-form-urlencoded；charset=UTF-8‘ not supported“

异常12021-06-24 12:32:20.137WARN 20024 --- [io-8080-exec-10] .w.s.m.s.DefaultHandlerExceptionResolver : Resolved [org.springframework.web.HttpMediaTypeNotSupportedException: Content type 'application/x-

二木成林

18776人浏览 · 2021-06-24 14:32:43

二木成林 · 2021-06-24 14:32:43 发布

异常1

2021-06-24 12:32:20.137  WARN 20024 --- [io-8080-exec-10] .w.s.m.s.DefaultHandlerExceptionResolver : Resolved [org.springframework.web.HttpMediaTypeNotSupportedException: Content type 'application/x-www-form-urlencoded;charset=UTF-8' not supported]

错误代码1

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
</head>
<body>
<form action="/login" th:action="@{/login}" method="post">
    用户名：<input type="text" name="username"><br/>
    密码：<input type="password" name="password"/><br/>
    <input type="submit" value="登录">
</form>
</body>
</html>

UserController.java

@Controller
public class UserController {
    @GetMapping("/")
    public String toLogin() {
        return "login";
    }

    @PostMapping("/login")
    @ResponseBody
    public String login(@RequestBody User user) {
        return user.toString();
    }
}

发现无法通过@RequestBody注解获取到表单POST提交的表单数据。

原因1

因为前端请求传Json对象的字符串则后端才使用@RequestBody。而我前端采用的表单提交的数据，是不能采用@RequestBody注解的。

解决1

第一种解决方式就是修改后端代码，去掉@RequestBody注解，也可以直接获取到表单提交的POST数据。

第二种解决方式就是修改前端代码，前端传递JSON对象的字符串，这里我采用jQuery来发送ajax请求传递JSON对象的字符串数据。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <script src="/js/jquery-1.10.2.min.js"></script>
</head>
<body>
<form id="loginForm">
    用户名：<input type="text" name="username"><br/>
    密码：<input type="password" name="password"/><br/>
    <input type="button" value="登录" onclick="login()">
</form>
</body>
<script>
    function login() {
        $.ajax({
            url: "login",
            type: "POST",
            data: JSON.stringify({"username": "zhangsan", "password": "123456"}),
            contentType: "application/json",
            success: function (data) {
                alert("请求成功！")
            },
            error: function () {
                alert("请求失败！")
            }
        })
    }
</script>
</html>

异常2

error：Unsupported Media Type

错误代码

前端代码login.html，使用Ajax发送POST并传递JSON格式数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <script src="/js/jquery-1.10.2.min.js"></script>
</head>
<body>
<form id="loginForm">
    用户名：<input type="text" name="username"><br/>
    密码：<input type="password" name="password"/><br/>
    <input type="button" value="登录" onclick="login()">
</form>
</body>
<script>
    function login() {
        $.ajax({
            url: "login",
            type: "POST",
            data: JSON.stringify({"username": "zhangsan", "password": "123456"}),
            success: function (data) {
                alert("请求成功！")
            },
            error: function () {
                alert("请求失败！")
            }
        })
    }
</script>
</html>

后端代码UserController.java，使用@RequestBody接收JSON格式的字符串数据

@Controller
public class UserController {
    @GetMapping("/")
    public String toLogin() {
        return "login";
    }

    @PostMapping("/login")
    @ResponseBody
    public String login(@RequestBody User user) {
        System.out.println(user);
        return user.toString();
    }
}

原因2

解决2

在Ajax提交数据的时候，设置数据类型contentType为"application/json"。

    function login() {
        var _this = this;
        $.ajax({
            url: "login",
            type: "POST",
            data: JSON.stringify({"username": "zhangsan", "password": "123456"}),
            contentType: "application/json",
            success: function (data) {
                alert("请求成功！")
            },
            error: function () {
                alert("请求失败！")
            }
        })
    }

再次查看请求头发现是"application/json"了