AngularJS with python flask test fails

Question

i'm learning to use python flask to complement angularJS. This is what i have on flask:

#!flask/bin/python
from flask import Flask, jsonify

app = Flask(__name__)

@app.route('/hola', methods=['GET'])
def get_tasks():
    x="pepepepep"
    return jsonify({'msj': x})

if __name__ == '__main__':
    app.run(debug=True)

when i open in my browser:

http://127.0.0.1:5000/hola 

i do indeed see the json object with that random message. Now, when i go to angularJS, this is what i have on the controller:

function ControladorPrueba($scope,$http) {

  $scope.mensaje="i";
  $scope.ObtenerMsj= function(){

  $http.get('http://localhost:5000/hola')

      .success(function(data){
         $scope.mensaje=data.msj;
       })
      .error(function(data,status){
         $scope.mensaje = status;
       });
  };
}

The problem is that when this function is executed, the get always go on .error(...), any ideas of why this happens even when the service in flask works well when opened on the browser? am i missing something? Any help appreciated. Thanks!

Answer 1

I suspect that this may be due to the Same-origin policy. If you're running your Flask app on localhost, and if you're serving your Angularjs files separately (for example, using the file:/// protocol), then the browser will actually forbid your Angular code from talking to the webservice for security reasons.

If this is the case, you have two solutions. You can either start serving your HTML/CSS/Javascript files from your Flask app, or by using something like Flask-Cors to explicitly set your server to allow external requests.