Getting CORS (Cross-Origin...) error when using python flask-restful with consuming AngularJS (using $http)

I use a python program for providing a restful service with the flask-restful extension. I want to consume it with a AngularJS app. Everything works (for the moment) on my localhost. For consuming the service I use AngularJS $http as you can see below. Everytime I do a call I get this damn CORS error (see below)...

I tried many different things after searching for one and a half day but nothing helps me to prevent this problem and I really don't know what else to do.. Unfortunately there is no official documentation at the flask-restful site.

I'm not sure if I'm missing anything obvious or if this is really that difficult to get working in this combination of technologies...

At the end of my post you see a list of things I already tried...

A simple curl works by the way...

I would be glad for any provided help!

Here is the relevant python code:

app = Flask(__name__)
api = Api(app)

class DatabaseRestRoomList(Resource):

def __init__(self):
    self.reqparse = reqparse.RequestParser()
    self.reqparse.add_argument('name', type=str, required=True,
        help='No room name provided')
    super(DatabaseRestRoomList, self).__init__()

def get(self):
    #make some logic to give a dict for the variable roomlist
    return (roomlist)

def post(self):
    args = self.reqparse.parse_args()
    name = args['name']
    db.createRoom(name)
    return ({'success': 'yes'})

api.add_resource(DatabaseRestRoomList, '/room')

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

Here is my Angularjs service code:

app.service('deviceService', ['$http',
        function ($http) {

  this.getAllRooms = function () {
    var roomlist;
    var urlbase = "http://localhsot:5000"
    var urltail = "room"
    var newroom = { 'name': "NewXYRoom" };

    $http.post(urlbase + '/' + urltail, newroom).
    success(function (data, status, headers, config) {
        alert("success");
    }).
    error(function (data, status, headers, config) {
        alert("error..")
    });
}]);

When I try to do a get or post both times I get this cors error... (and of course my error alert)

XMLHttpRequest cannot load http://localhsot:5000/room. No 'Access-Control-Allow-Origin'
header is present on the requested resource. Origin 'http://localhost:53144' is therefore not allowed access.

If I "only" do a GET the error occurs on the get itself. If I do the POST I get the error at OPTIONS. These are the headers (coppied from the firebug network tab) in case of the post

Answer-Header
Cache-Control   no-cache
Connection  Keep-Alive
Content-Length  619
Content-Type    text/html; charset=utf-8
Pragma  no-cache
Proxy-Connection    Keep-Alive

Request-Header
Accept  text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Encoding gzip, deflate
Accept-Language en-us,de-de;q=0.8,de;q=0.5,en;q=0.3
Access-Control-Request-He...    content-type
Access-Control-Request-Me...    POST
Cache-Control   no-cache
Connection  keep-alive
Host    localhsot:5000
Origin  http://localhost:53144
Pragma  no-cache
User-Agent  Mozilla/5.0 (Windows NT 6.3; WOW64; rv:29.0) Gecko/20100101 Firefox/29.0

I already tried this

If you do an AngularJS POST call using CORS sometimes it triggers (depending on your MIME/Content-Type) a prior OPTIONS call to check that the cross-server request is valid before sending all the POST data. Since your API does not have an options method, Flask takes the call instead of Flask-Restful, and it does not set up the CORS options which are only defined for the API resource.

You may solve the problem defining a dummy options handler:

def options(self):
    pass

To make the whole thing work, define the cors options using

api.decorators = [cors.crossdomain(origin='*', headers=['accept', 'Content-Type'])]

I don't know why, but I had to explicitly add all the headers to the list; using headers = '*' did not work for me. You might also have to add the decorators before hooking up the resources to the API.

You can solve this using the after_request hook:

@app.after_request
def after_request(response):
    response.headers.add('Access-Control-Allow-Origin', '*')
    response.headers.add('Access-Control-Allow-Headers', 'Content-Type,Authorization')
    response.headers.add('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE')
    return response

You can see a demo on how to use it here - http://tutsbucket.com/tutorials/building-a-blog-using-flask-and-angularjs-part-1/

The tutorial also uses Flask-restful.

The Flask extension Flask-cors (https://github.com/corydolphin/flask-cors) worked well for me.