Angular控制器中的多个$ http请求交叉到REST API

时间:2016-05-10 20:50:15

标签: javascript angularjs spring rest cors

我正在尝试使用Spring对我自己的用Java编写的REST API执行多个GET请求。 3/10次请求将被处理罚款。 7/10其中一个http请求将失败,并且所请求的资源上存在“无访问控制 - 允许 - 来源”标头。错误。我有一个像这样的REST控制器:

@RestController
@CrossOrigin
@RequestMapping("/person")
public class PersonRestController {

@Autowired
ActivityTracker tracker;

@RequestMapping(method = RequestMethod.POST, consumes = MediaType.APPLICATION_JSON_VALUE)
public void addPerson(@RequestBody Person person){
    tracker.addPerson(person);
}

@RequestMapping(method = RequestMethod.GET, produces = MediaType.APPLICATION_JSON_VALUE)
public Collection<Person> getPersons(){    
    return tracker.getPersons();
}  

@RequestMapping(value = "/{id}", method = RequestMethod.GET, produces = MediaType.APPLICATION_JSON_VALUE)
public Person getPerson(@PathVariable long id){
    return tracker.getPerson(id);
}

@RequestMapping(value="/{id}/activities", method = RequestMethod.GET, produces = MediaType.APPLICATION_JSON_VALUE)
public Collection<RunActivity> getActivitiesByPerson(@PathVariable("id") long id){
    return tracker.getActivities(tracker.getPerson(id));

}

@RequestMapping(value = "/{id}", method = RequestMethod.PUT, consumes = MediaType.APPLICATION_JSON_VALUE)
public void updatePerson(@RequestBody Person person){
    tracker.updatePerson(person);
}

@RequestMapping(value = "/{id}", method = RequestMethod.DELETE)
public void deletePerson(@PathVariable("id") Long id){
    tracker.deletePerson(tracker.getPerson(id));
}

@RequestMapping(value = "/fastest", method=RequestMethod.GET, produces = MediaType.APPLICATION_JSON_VALUE)
public Person getFastestRunner(){
    return tracker.getFastestRunner();
}

@RequestMapping(value = "/longest", method=RequestMethod.GET, produces = MediaType.APPLICATION_JSON_VALUE)
public Person getLongestRunner(){
    return tracker.getLongestRunner();
}


}

My Angular应用程序如下所示:

angular.module('trackerApp', ['ngCookies', 'ui.router', 'pascalprecht.translate'])
.config(function($stateProvider, $urlRouterProvider, $translateProvider){
    $urlRouterProvider.otherwise('/');

    $translateProvider.translations('en', {
        TITLE: 'Welcome!',
        INTROMESSAGE: 'Use this Activity Tracker application for free!',
        en: 'English',
        nl: 'Nederlands'
    })
    .translations('nl', {
        TITLE: 'Welkom!',
        INTROMESSAGE: 'Gebruik deze volledig gratis activiteitstracker!',
        en: 'English',
        nl: 'Nederlands'
    });

    $translateProvider.preferredLanguage('en');

    $stateProvider
        .state('persondetails', {
            url: '/runners/:userId',
            templateUrl: 'views/activitiesByPerson.html',
            controller: 'personDetailController as personDetails'
        });
})

.controller('personDetailController', function($http, $stateParams){
    var personDetails = this;
    var userId = $stateParams.userId;

    var reqUrlTwo = 'http://193.191.187.14:10578/RestTracker-1.0-SNAPSHOT/person/' + userId;

    $http({
        url:  reqUrlTwo,
        method: 'GET'
    }).success(function(response){
        personDetails.person = response;
    });

    var reqUrl = 'http://193.191.187.14:10578/RestTracker-1.0-SNAPSHOT/person/' + userId + '/activities';

    $http({
        url: reqUrl,
        method: 'GET'


    }).success(function(response){
        personDetails.activities = response;
    });


});

因此3/10次GET请求都将得到妥善处理并显示结果。但是7月10日中的一个会失败并告诉我

  

XMLHttpRequest无法加载http://193.191.187.14:10578/RestTracker-1.0-SNAPSHOT/person/2。 No&#39; Access-Control-Allow-Origin&#39;标头出现在请求的资源上。起源&#39; http://localhost:8000&#39;因此不允许访问。响应的HTTP状态代码为500。

有时候两者都会成功,有时只会赢得一次?

我也尝试过使用@ResponseBody并设置标题和XML设置

1 个答案:

答案 0 :(得分:0)

检查请求标头,Acces-Control-Allow-Origin必须从服务器发送。见http://enable-cors.org