2015-02-07 4 views
2

내 프로젝트에 이상한 문제가 있습니다. 필자는 Spring에서 서버 응용 프로그램을 작성하고 AngularJS로 프론트 엔드를 작성하기로 결정했습니다. 서버 측에서 간단한 엔티티에서 간단한 데이터를 반환하는 간단한 컨트롤러가 있습니다.). 그것은 다음과 같습니다 전면에Spring & AngularJS - RESTful API로 연결

@RestController 
public class ApiController 
{ 
    @RequestMapping(value = "/getAllProfiles", method = RequestMethod.GET) 
    public Entity getEntity() 
    { 
     Entity e = new Entity(); 
     e.setName("myname"); 
     return e; 
    } 
} 

, 내가 보이는 Angulars 컨트롤러,이 같은 :

var app = angular.module('app', []); 

app.config(function($httpProvider) { 
    $httpProvider.defaults.useXDomain = true; 
    delete $httpProvider.defaults.headers.common['X-Requested-With']; 
}); 

app.controller('Hello', function ($scope, $http) { 
    $http.get({ 
     method: 'GET', 
     url: 'http://localhost:8080/getAllProfiles' 
    }).success(function (data) { 
     console.log('success', data) 
     $scope.greeting = data; 
    }).error(function(){ 
     console.log("something goes wrong"); 
    }); 
}) 

및 HTML 파일 :

<html ng-app="app"> 
<head> 
    <title>Hello AngularJS</title> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.12/angular.min.js"></script> 
    <script src="view1.js"></script> 
</head> 
<body> 
<div ng-controller="Hello"> 
    <p>The content is {{greeting.name}}</p> 
</div> 
</body> 
</html> 

내가 서버를 시작, localhost : 8080/getAllProfiles에 연결하면 모든 것이 잘 작동합니다. 이 {"name":"myname"}과 같은 JSON을받습니다. 그러나 Angular 측에서 동일한 작업을 시도하면 The content is - 서버의 빈 데이터가 수신되고 물론 오류 기능이 컨트롤러에서 호출됩니다. CORS 문제 일 수 있다고 생각했지만 서버 쪽과 앵귤러쪽에 필터를 추가했는데 도움이되지 않았습니다. js 콘솔 (Chrome을 사용하고 있습니다) : 리소스를로드하지 못했습니다 : 서버가 404 상태 (응답 없음)로 응답 함

정말 어떻게해야할지 모르겠군요. 이 두 응용 프로그램 사이에서 "말하기"를 원하지만이 때문에이 작업을 수행 할 수 없습니다. 누군가가이 문제를 도와 줄 수 있다면 매우 감사 할 것입니다.

+0

아마 차이는 없지만 http 구성에 GET 메소드 이름을 설정하는 것이 좋습니다.요청을 받으십시오. 분명히이 라인은 필요하지 않습니다. 이미 얻었습니다. – mindparse

+0

예, 알고 있습니다. 이 http의 구조체 사이의 변경 사항은 문제를 해결하지 못합니다. – allocer

+0

CORS가 문제가 아닌지 확인했다면 a) 스프링 애플리케이션이 8080에서 청취하고 b) 바인드 된 기본 경로가 없음 (즉, 일부/foo/getAllProfiles) ? – h7r

답변

0

CORS가 localhost에 문제가있는 경우 grunt-connect-proxy을 사용할 수 있습니다. 당신의 툴툴 거리는 소리 파일에 정의합니다

proxies: [ 
       { 
        context: '/', 
        host: '127.0.0.1', 
        port: 8080, 
        https: false, 
        xforward: false 
       } 
      ] 

은 당신의 작업에 connext 프록시 작업을 추가하는 것을 잊지 마십시오. 웹 사이트에는 모든 것이 명확하게 설명되어 있습니다. 이것은 로컬 호스트의 도메인 간 문제를 해결합니다. 그런 다음 컨트롤러에 서버를 호출 할 수 있습니다 : 그것은 작동합니다

$http.get({ 
     method: 'GET', 
     url: '/getAllProfiles' 
    }) 

, 툴툴 거리는 소리가 각 응용 프로그램의 포트에서 프록시를 실행하기 때문.

그건 그렇고. 단위 테스트를 통해 각도 논리를 테스트 해 보셨습니까? $ httpbackend를 사용하여 Spring 애플리케이션과 정확히 동일한 백엔드를 시뮬레이션하면 결과를 볼 수 있습니다.

+0

아니요, 테스트하지 않았습니다. 고마워, 내가 할거야. 이 grunt-connect에 대해 더 자세히 알려줄 수 있습니까? 내 각도 애플 리케이션에 추가하고 일부 구성에서 설정해야합니까? – allocer

+0

쓸데없는 것을 사용 하시나요? 그것은 툴툴 거리는 것입니다 - 당신을 위해 프로젝트를 컴파일하는 툴. 그것없이 프록시가 있는지 나는 모른다. – cyan

+0

Grunt를 프로젝트에 설치했습니다. 나도 몰라, 내가 틀린 일을했는지 ​​모르지만, 위 튜토리얼 http://gruntjs.com/getting-started와 Readme 파일을 위의 게시물에서 준 링크에서 사용했다. 여전히 작동하지 않습니다. 나는 WebStrom을 프론트 애플 리케이션에 사용하고 IntelliJ는 서버 어플리케이션에 사용하고 있습니다. WebStorm에서 내 휴식 서비스를 테스트 할 때 올바르게 작동합니다 (도구 -> RESTful 서비스 테스트). 나는 Grunt를 가지고 있고 Gruntfile을 가지고 있으며 문제가 해결되지 않았습니다. – allocer

0

마지막으로 문제가 해결되었습니다. 도와 주셔서 감사합니다. 그꿀은 해결책이었습니다.

이 항목의 모든 내용을 읽지 않으려는 사람들을 위해이 솔루션을 설명하고 싶습니다. ;) 일부 Angular 응용 프로그램에서 Spring REST API (두 개의 분리 된 응용 프로그램)에 연결하려고했지만 localhost의 프록시 문제로 인해이 작업을 수행 할 수 없었습니다. 내 Angular 응용 프로그램에 대한 Grunt를 설치하고이를 구성하고 서버를 시작한 후 데이터를 가져 오려고했습니다. 그것은 벗어났다. 물론 서버 측의 CORS 필터가 필요합니다. http://www.hierax.org/2014/01/grunt-proxy-setup-for-yeoman.html http://fettblog.eu/blog/2013/09/20/using-grunt-connect-proxy/ 및 시안에서 github에의 링크 : 그들은 내가이 그것으로 나에게 도움이 자습서를 사용 https://spring.io/guides/gs/rest-service-cors/

여기에 대해 설명합니다.

+0

정확히 같은 문제가 있습니다. 내 extJS 응용 프로그램에 Grunt를 설치하고 Spring MVC (& 보안) 서버 응용 프로그램에서 CORS 필터를 설치하려고했지만 작동하지 않습니다. 서버 측에서 CORS 필터를 어떻게 확인할 수 있습니까? – Amir

관련 문제