0

I want to send a get request to my own Server via Angular. The Server is deployed on Heroku. I just want to receive the json data from my Server. The problem is, that I receive an error everytime I try to get the json data. When I use a different URL (like this: https://httpbin.org/get ) everything works fine. My Heroku URL: http://webservice-team-3.herokuapp.com/1

Client Code:

var app = angular.module('app', [])

app.controller('mainController', function($scope, $http) {
    $scope.formData = {};
    //$scope.messageData = {};
    $scope.test ="hallo";

    // Get all messages
    $http.get('http://webengserver.herokuapp.com/Matthias')
        .success(function(data) {
            $scope.messageData = data;
            console.log(data);
        })
        .error(function(error) {
            $scope.messageData = "error";
            console.log('Error: ' + error);
        });
});


<!Doctype html>
<html ng-app="app">
    <head>
        <title>Webservice-Team-3-Client</title>
        <style>
            [ng\:cloak], [ng-cloak], .ng-cloak {
                display: none;
            }
        </style>
    </head>
    <body>
        <div ng-controller="mainController">
            <p>{{messageData}}</p>
        </div>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
        <script src="js/app.js"></script>
    </body>
</html>

Here is the code from the Server, which handles the http get:

router.get('/:user_id', function(req, res) {

var results = [];
var id = req.params.user_id

// Get a Postgres client from the connection pool
pg.connect(connectionString, function(err, client, done) {
    // Handle connection errors
    if(err) {
        done();
        console.log(err);
        return res.status(500).json({ success: false, data: err});
    }

    // SQL Query > Select Data
    var query = client.query("SELECT * FROM users where userid=($1) ORDER BY userid ASC;", [id]);

    // Stream results back one row at a time
    query.on('row', function(row) {
        results.push(row);
    });

    // After all data is returned, close connection and return results
    query.on('end', function() {
        done();
        return res.json(results);
    });

});
bobafett1
  • 43
  • 1
  • 9
  • You might have a cross-domain issue. – Sargon Jun 23 '16 at 12:04
  • The error doesn't appear in the browser. I'm using $scope.messageData = "error"; to check if it's an error – bobafett1 Jun 23 '16 at 12:07
  • How can I fix a cross-domain issue? – bobafett1 Jun 23 '16 at 12:07
  • @bobafett1, I have checked your server. It doesn't give any error (null). But I see strange headers in response: `X-Content-Type-Options:nosniff X-Frame-Options:SAMEORIGIN X-Request-Id:a854d696-9045-4344-83b5-dfc6001f1046 X-Runtime:0.041496 X-Xss-Protection:1; mode=block` Try to check your server configuration. Look at the headers. – Sargon Jun 23 '16 at 12:48
  • @Sargon, I added the code from my Server. Can you see any mistake? – bobafett1 Jun 23 '16 at 12:57
  • @bobafett1, check this: http://stackoverflow.com/questions/2535454/how-to-set-access-control-allow-origin-in-webrick-under-rails – Sargon Jun 23 '16 at 13:09
  • @Sargon, I fixed my Problem with this: `app.all('*', function(req, res, next) { res.header('Access-Control-Allow-Origin', '*'); res.header('Access-Control-Allow-Methods', 'PUT, GET, POST, DELETE, OPTIONS'); res.header('Access-Control-Allow-Headers', 'Content-Type'); next(); });` But why do I have to change that on my Server? I mean, I receive json data from my Server. Why am I not able to handle that data ? – bobafett1 Jun 23 '16 at 13:16
  • @bobafett1, that because of cross-domain protection enabled on your server. This mean that you are able to receive response only from same domain. That's why you are able to see json in browser, but not using js code. With this fix you are simply allowing anyone to access your resource from any domains. – Sargon Jun 23 '16 at 13:25

0 Answers0