Nginx, Play and Angular Access-Control-Allow-Origin error

Question

My html files are under the html folder of Nginx, I tried to send an $http request via angular to the Play application. The play application is under port 9210, while nginx listens to port 80 (for viewing the html files); I think that the problem resides here, because different ports are treated as different domains.

My Nginx server configuration is:

listen 80;
        listen 443 default ssl;
        server_name  localhost;
     #ssl on;
     ssl_certificate      /usr/local/nginx/conf/server.crt;
     ssl_certificate_key  /usr/local/nginx/conf/server.key;
        #charset koi8-r;

        #access_log  logs/host.access.log  main;

     location / {           
        add_header Access-Control-Allow-Origin http://127.0.0.1;

     }

The relevant part in the routes file in Play is:

POST    /processReq             controllers.Application.processReq()

In angular my $http request is:

$scope.url = 'http://ec2-50-112-30-246.us-west-2.compute.amazonaws.com:9210/processReq';
$scope.routeReview = function() {
$http.post($scope.url, { "blanCommand": "read reviews() for=\""+$scope.keywords+"\" mode=full"}).
        success(function(data, status) {
            $scope.status = status;
            $scope.data = data;
        $rootScope.reviews = data;
        alert('success'); 
        $location.path('/review');
        })
        .
        error(function(data, status) {
            $scope.data = data || "Request failed";
            $scope.status = status;   
        alert('fail');
        $location.path('/review');
        });
    };

My question is as follows; Upon request I am receiving the Access-Control-Allow-Origin error, what is the proper way to configure my web-application?

Thanks ahead

Answer 1

What you need is Nginx to act as proxy, and redirect requests to a specific subpath to Play, while serving the HTML files for the other requests.

The documentation of Play has some information on that.