2014-07-09 2 views
2
내 각도 JS 코드에서 REST 서비스를 호출하는 동안 나는 한 지점에서 붙어있어

:각도 JS에서 CORS 문제를 극복하는 방법

서비스 :

app.factory('UserFactory', function ($resource) { 
    return $resource('http://localhost:8080/demoApp/service/users', {}, { 
     show: { method: 'GET', isArray: true },  
    }) 
}); 

컨트롤러 :

function userListController($scope, UserFactory){ 
    $scope.showUser = function() { 
     alert("Show user ..."); 
     $scope.fetchedData = []; 
     $scope.users = UserFactory.show(); 
     $scope.fetchedData.push($scope.users); 

    };  
} 

에서 CORS를 극복하기 위해 우리는 Java CORS Filter를 다음과 같이 구현했습니다. -

Following line were written in doFilter method inside a Filter - 

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", "x-requested-with"); 

$ http.jsonp와 완벽하게 작동합니다. 위의 방법으로 호출하는 동안 브라우저의 자바 스크립트 콘솔 (Chrome)에서 다음 오류가 발생합니다.

XMLHttpRequest는 http://localhost:8080/demoApp/service/users을로드 할 수 없습니다. 'Access-Control-Allow-Origin'헤더가 요청 된 리소스에 없습니다. 따라서 Origin http://localhost:63342은 액세스가 허용되지 않습니다.

제발 도와주세요 ...

감사합니다,

+0

서버에서 CORS 클라이언트 도메인을 허용해야합니다. http://tostring.it/2014/03/04/how-to-use-CORS-with-ASPNET-WebAPI-2/ – bobah75

+0

$ resource accepts using colon 매개 변수. \\ : –

+0

으로 콜론을 이스케이프 처리해야합니다. 클라이언트와 서버가 같은 위치에서 실행되지 않기 때문에 최신 웹 브라우저가 CORS를 구현합니다. 서버 측의 정확한 위치에'response.setHeader ("Access-Control-Allow-Origin", *);을 적용하고 싶습니까? –

답변

0

얀타 P. 당신은 이런 식으로 뭔가를 시도?

1

매우 도움이됩니다. 이 발췌 부분 :

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

매우 잘 작동했습니다. 그러나 Chrome에서 사용할 수있는 CORS 플러그인을 사용하여 Chrome 브라우저의 보안 플래그를 비활성화해야했습니다. 그 후, 나는 anglejs 앱에서 편안하게 전화를 할 수 있었다.

관련 문제