AngularJS Render Raw JSON из бэкэнда Play Framework

У меня есть простое приложение AngularJS, которое должно вызывать URL-адрес и отображать полученный JSON как есть. Вот index.html:AngularJS Render Raw JSON из бэкэнда Play Framework

<!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

I затем попытался позвонить по другому URL с совершенно другой сервер:

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

И это делает содержание, как ожидалось:

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

Я запускаю index.html внутри сервера NGINX, а мой серверный сервер, работающий на порте 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; 
    } 
}

источник

2016-07-13 sparkr

Я понял, в чем проблема. Мне пришлось включить фильтр CORS в приложении Play. Я использую Play рамки 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"] 
    }

источник

2016-07-13 19:54:58 sparkr

Вот полная настройка, если кто-то ищет шаблон проекта: https://github.com/joesan/nginx-mac-os-setup – sparkr

AngularJS Render Raw JSON из бэкэнда Play Framework

ответ

Смежные вопросы