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を取得するが、私はローカルホストを呼び出すときに、私は空白のページを参照してください:8080

私はその後、完全に別のサーバーから別のURLを呼び出そうとしました:

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

そして予想通り、これはコンテンツをレンダリング:

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

私は、NGINXサーバー内でindex.htmlを実行していますが、ポート9000で動作しているバックエンドサーバーはPlayフレームワークによって処理されています。ここに私の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

私は問題が何かを考え出しました。私は、再生アプリケーションでCORSフィルタを有効にしなければなりませんでした。私はプレイフレームワーク2.5を使用していますし、ここでCORSフィルタを設定する方法のプレイからの参照文書は、次のとおりです。

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

をさらに、application.confに、私は次のことをしなければならなかった:

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"] 
    } 
+0

誰かがプロジェクトテンプレートを探している場合の完全なセットアップです:https://github.com/joesan/nginx-mac-os-setup – sparkr