["javascript","python","ajax","flask","cors"]
Solve Cross Origin Resource Sharing with Flask

For the following ajax post request for Flask (how can I use data posted from ajax in flask?): $.ajax({ url: "http://127.0.0.1:5000/foo", type: "POST", contentType: "application/json", data: JSON.stringify({'inputVar': 1}), success: function( data ) { alert( "success" + data ); } }); I get a Cross Origin Resource Sharing (CORS) error: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. The response had HTTP status code 500. I tried solving it in the two following ways, but none seems to work. Using Flask-CORS This is a Flask extension for handling CORS that should make cross-origin AJAX possible. http://flask-cors.readthedocs.org/en/latest/ How to enable CORS in flask and heroku Flask-cors wrapper not working when jwt auth wrapper is applied. Javascript - No 'Access-Control-Allow-Origin' header is present on the requested resource My pythonServer.py using this solution: from flask import Flask from flask.ext.cors import CORS, cross_origin app = Flask(__name__) cors = CORS(app, resources={r"/foo": {"origins": "*"}}) app.config['CORS_HEADERS'] = 'Content-Type' @app.route('/foo', methods=['POST','OPTIONS']) @cross_origin(origin='*',headers=['Content-Type','Authorization']) def foo(): return request.json['inputVar'] if __name__ == '__main__': app.run() Using specific Flask Decorator This is an official Flask code snippet defining a decorator that should allow CORS on the functions it decorates. http://flask.pocoo.org/snippets/56/ Python Flask cross site HTTP POST - doesn't work for specific allowed origins http://chopapp.com/#351l7gc3 My pythonServer.py using this solution: from flask import Flask, make_response, request, current_app from datetime import timedelta from functools import update_wrapper app = Flask(__name__) def crossdomain(origin=None, methods=None, headers=None, max_age=21600, attach_to_all=True, automatic_options=True): if methods is not None: methods = ', '.join(sorted(x.upper() for x in methods)) if headers is not None and not isinstance(headers, basestring): headers = ', '.join(x.upper() for x in headers) if not isinstance(origin, basestring): origin = ', '.join(origin) if isinstance(max_age, timedelta): max_age = max_age.total_seconds() def get_methods(): if methods is not None: return methods options_resp = current_app.make_default_options_response() return options_resp.headers['allow'] def decorator(f): def wrapped_function(*args, **kwargs): if automatic_options and request.method == 'OPTIONS': resp = current_app.make_default_options_response() else: resp = make_response(f(*args, **kwargs)) if not attach_to_all and request.method != 'OPTIONS': return resp h = resp.headers h['Access-Control-Allow-Origin'] = origin h['Access-Control-Allow-Methods'] = get_methods() h['Access-Control-Max-Age'] = str(max_age) if headers is not None: h['Access-Control-Allow-Headers'] = headers return resp f.provide_automatic_options = False return update_wrapper(wrapped_function, f) return decorator @app.route('/foo', methods=['GET','POST','OPTIONS']) @crossdomain(origin="*") def foo(): return request.json['inputVar'] if __name__ == '__main__': app.run() Can you please give some some indication of why that is?
It worked like a champ, after bit modification to your code # initialization app = Flask(__name__) app.config['SECRET_KEY'] = 'the quick brown fox jumps over the lazy dog' app.config['CORS_HEADERS'] = 'Content-Type' cors = CORS(app, resources={r"/foo": {"origins": "http://localhost:port"}}) @app.route('/foo', methods=['POST']) @cross_origin(origin='localhost',headers=['Content- Type','Authorization']) def foo(): return request.json['inputVar'] if __name__ == '__main__': app.run() I replaced * by localhost. Since as I read in many blogs and posts, you should allow access for specific domain