spring 控制器无法从 $http 角度检索数据答案

【问题标题】：spring controller could not retrive a data from $http angularspring 控制器无法从 $http 角度检索数据
【发布时间】：2016-12-04 17:11:23
【问题描述】：

我在 Angular 和控制器中有一个 $http 函数，但控制器不会在日志打印中检索从 Angular 发送的数据

跳过 CORS 处理：响应已包含 “访问控制允许来源”标题

我已将web.xml 文件中的过滤器配置到标题中

response.setHeader("Access-Control-Allow-Origin", "*");
response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
response.setHeader("Access-Control-Max-Age", "3600");
response.setHeader("Access-Control-Allow-Headers", "Content-Type, x-requested-with");

我的角度函数是这个

     app.controller('LoadCardController', function($scope, $http) {

    $scope.executor = function() {

        var person = {
            name : 'Prueba',
            todayDate : 1469679969827
        };

        console.log("DATA=> ", data);

        $http({
            method : 'POST',
            url : 'http://localhost/myWeb/addPerson',
            data : person,
            headers : {
                'Content-Type' : 'application/json'
            }
        }).then(function successCallback(response) {
            console.log("success");
            console.log(response);
        }, function errorCallback(response) {
            console.log("error");
            console.log(response);

        });
    }

});

我的控制器是这个...

@ResponseBody
            @RequestMapping(path = "/addPerson", method = RequestMethod.POST)
            public Person addPerson(final Person person) throws CustomException {

                person.setAge("18");
                person.setBithDay("15");

                LOGGER.trace("Add person with data {}", person);

                return person;

            }

            });
        }

当进入控制器时，人的数据为空，对于名称和今天的属性，这是我以角度发送的。

我的控制器现在很简单，因为只返回同一个人对象

【问题讨论】：

我认为这与 CORS 无关，因为正如您所说，Spring 控制器能够接收请求。您是否需要为所有主机启用 CORS？

标签： javascript angularjs spring spring-mvc cors

【解决方案1】：

从您在此处显示的内容来看，请求似乎正在通过，但数据并未进入 Spring 控制器方法中的 person 参数。可能有几个不同的原因。

首先，可能是请求正文没有映射到您的 Spring 控制器方法的 person 参数。您可以通过在方法参数之前使用@RequestBody 注释（详细信息here）来告诉Spring 自动执行此操作。在您的示例中：

@ResponseBody
@RequestMapping(path = "/addPerson", method = RequestMethod.POST)
public Person addPerson(@RequestBody Person person) throws CustomException {

    person.setAge("18");
    person.setBithDay("15");

    LOGGER.trace("Add person with data {}", person);

    return person;

}

如果这不能解决问题，则可能是 Person 类的问题。至少，它需要：

public class Person {
    private String name;
    private String age;
    private String bithday;
    private Date todayDate;

    public Person() {
        // this depends how your serialization is set up
    }

    // getters and setters...
}

一种约定是使用一个单独的数据传输对象类（即PersonDto），它从请求正文中获取数据并用它构建一个Person对象（反之亦然），这样您就可以控制提交如何映射到后端。有关该模式的更多信息here。

【讨论】：

【解决方案2】：

我会给你一个选择

你的 DTO 是

public class Person {
    private String name;
    private String todayDate;
    private String age;
    private String bithDay;
 // getter and setters, etc....

AngularJS 使用：

// Every properties matches with your DTO, example: name, todayDate looks... 
var formData = new FormData();
formData.append("name", 'Prueba');
formData.append("todayDate"    , '1469679969827');

console.log("DATA=> ", formData);
$http({
       method : 'POST',
            url : 'http://localhost/myWeb/addPerson',
            data : formData,
            headers : {
                'Content-Type' : undefined
            }
        }).then(function successCallback(response) {
            console.log("success");
            console.log(JSON.stringify(response));
        }, function errorCallback(response) {
            console.log("error");
            console.log(response);

        });

在我的情况下，您在浏览器中的登录 Chrome 看起来......

success
myjs.js:1744 {"data":{"name":"Prueba","todayDate":"1469679969827","age":"18","bithDay":"15"},"status":200

【讨论】：