AngularJS Rendern von Roh-JSON aus Play Framework-Backend

Ich habe eine einfache AngularJS-Anwendung, die eine URL aufrufen und den resultierenden JSON so darstellen soll, wie er ist. Hier ist die index.html:AngularJS Rendern von Roh-JSON aus Play Framework-Backend

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

Die URL, wenn ich rufe, wie aus dem Browser ist, dass ich die JSON bekommen, die ich erwarten würde, aber ich sehe eine leere Seite, wenn ich localhost nennen: 8080

I dann versucht, eine andere URL aus einem ganz anderen Server zu nennen:

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

Und dies macht den Inhalt wie erwartet:

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

Ich führe die index.html innerhalb des NGINX-Servers aus, während mein Backend-Server, der auf Port 9000 läuft, vom Play-Framework bedient wird. Hier ist meine NGINX-Konfiguration:

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; 
    } 
}

Quelle

2016-07-13 sparkr

Ich habe herausgefunden, was das Problem ist. Ich musste den CORS-Filter in meiner Play-Anwendung aktivieren. Ich verwende Play-Framework 2.5 und hier ist das Referenzdokument von Spielen wie CORS-Filter konfigurieren:

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

Zusätzlich wird in der application.conf, hatte ich folgendes zu tun:

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

Quelle

2016-07-13 19:54:58 sparkr

Hier ist das komplette Setup, falls jemand nach einer Projektvorlage sucht: https://github.com/joesan/nginx-mac-os-setup – sparkr

AngularJS Rendern von Roh-JSON aus Play Framework-Backend

Antwort

Verwandte Themen