2016-07-13 2 views
0

URL을 호출하고 결과 JSON을 그대로 렌더링하는 간단한 AngularJS 애플리케이션이 있습니다. 여기에 index.html을은 다음과 같습니다Play Framework 백엔드에서 AngularJS 렌더링 Raw JSON

<!doctype html> 
<html ng-app> 
    <head> 
     <title>Hello AngularJS</title> 
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script> 
     <script> 
     function Hello($scope, $http) { 
      $http.get('http://localhost:9000/status'). 
      success(function(data) { 
       $scope.greeting = data; 
      }); 
     } 
    </script> 
    </head> 

    <body> 
     <div ng-controller="Hello"> 

      <pre>{{greeting | json}}</pre> 
     </div> 
    </body> 
</html> 

URL입니다 나는 브라우저에서와 같이, 내가 기대하는 JSON을 얻을 수 있지만 localhost를 호출 할 때 빈 페이지를 참조 호출 할 때 : 8080

I을 다음 완전히 다른 서버에서 다른 URL을 호출하려고 :

http://rest-service.guides.spring.io/greeting 

그리고 이것은 예상대로 콘텐츠를 렌더링 :

{"id":1,"content":"Hello, World!"} 

포트 9000에서 실행되는 백엔드 서버가 Play 프레임 워크에 의해 제공되는 동안 NGINX 서버 내부에서 index.html을 실행 중입니다. 다음은 NGINX 구성입니다.

server { 
    listen  8080; 
    server_name localhost; 
    root /Users/joesan/Projects/Sandbox/my-app; 

    #charset koi8-r; 

    access_log logs/host.access.log main; 

    location/{ 
      # If you want to enable html5Mode(true) in your angularjs app for pretty URL 
      # then all request for your angularJS app will be through index.html 
      try_files $uri /index.html; 
    } 

    # /api will server your proxied API that is running on same machine different port 
    # or another machine. So you can protect your API endpoint not get hit by public directly 
    location /api { 
      proxy_pass http://localhost:9000; 
      proxy_http_version 1.1; 
      proxy_set_header Upgrade $http_upgrade; 
      proxy_set_header Connection 'upgrade'; 
      proxy_set_header Host $host; 
      proxy_cache_bypass $http_upgrade; 
      proxy_set_header X-Real-IP $remote_addr; 
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; 
    } 
} 

답변

0

문제가 무엇인지 알아 냈습니다. 내 Play 애플리케이션에서 CORS 필터를 활성화해야했습니다.

cors { 
    # Filter paths by a whitelist of path prefixes 
    pathPrefixes = ["/"] 

    # The allowed origins. If null, all origins are allowed. 
    allowedOrigins = null 

    # The allowed HTTP methods. If null, all methods are allowed 
    allowedHttpMethods = ["GET", "POST"] 
    } 
: 다음을 수행

https://www.playframework.com/documentation/2.5.x/CorsFilter

또한, application.conf에, 내가 가진를 : 나는 CORS 필터를 구성하는 방법에 대한 재생에서 여기 참조 문서입니다 플레이 프레임 워크 2.5을 사용하고 있습니다

+0

다음은 누군가 프로젝트 템플릿을 찾고있는 경우를위한 전체 설정입니다. https://github.com/joesan/nginx-mac-os-setup – sparkr

관련 문제