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?


    @Matt:

    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


    你可以用一个简单的方法得到结果:

    @app.route('your route', methods=['GET'])
    def yourMethod(params):
        response = flask.jsonify({'some': 'data'})
        response.headers.add('Access-Control-Allow-Origin', '*')
        return response
    

    Well, I faced the same issue. For new users who may land at this page. Just follow their official documentation.

    Install flask-cors

    pip install -U flask-cors
    

    then after app initialization, initialize flask-cors with default arguments

    from flask import Flask
    from flask_cors import CORS, cross_origin
    
    app = Flask(__name__)
    CORS(app)
    
    @app.route("/")
    def helloWorld():
       return "Hello, cross-origin-world!"
    
    链接地址: http://www.djcxy.com/p/88654.html

    上一篇: C ++ TerminateProcess函数

    下一篇: 利用Flask解决跨源数据共享问题