Skip to content

# Using the extension

Flask-CORS can be used as an extension to provide centralized configuration of resources by patterns,

    """
    Flask-Cors example
    ===================
    This is a tiny Flask Application demonstrating Flask-Cors, making it simple
    to add cross origin support to your flask app!

    :copyright: (c) 2016 by Cory Dolphin.
    :license:   MIT/X11, see LICENSE for more details.
    """
    from __future__ import annotations

    import logging

    from flask import Flask, Response, jsonify

    try:
        from flask_cors import CORS  # The typical way to import flask-cors
    except ImportError:
        # Path hack allows examples to be run without installation.
        import os
        import sys
        parentdir = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
        sys.path.insert(0, parentdir)

        from flask_cors import CORS

    app = Flask('FlaskCorsAppBasedExample')
    logging.basicConfig(level=logging.INFO)

    # To enable logging for flask-cors,
    logging.getLogger('flask_cors').level = logging.DEBUG

    # One of the simplest configurations. Exposes all resources matching /api/* to
    # CORS and allows the Content-Type header, which is necessary to POST JSON
    # cross origin.
    CORS(app, resources=r'/api/*')

    @app.route("/")
    def helloWorld() -> str:
        """
            Since the path '/' does not match the regular expression r'/api/*',
            this route does not have CORS headers set.
        """
        return '''
    <html>
        <h1>Hello CORS!</h1>
        <h3> End to end editable example with jquery! </h3>
        <a class="jsbin-embed" href="http://jsbin.com/zazitas/embed?js,console">JS Bin on jsbin.com</a>
        <script src="//static.jsbin.com/js/embed.min.js?3.35.12"></script>

    </html>
    '''

    @app.route("/api/v1/users/")
    def list_users() -> Response:
        """
            Since the path matches the regular expression r'/api/*', this resource
            automatically has CORS headers set. The expected result is as follows:

            $ curl --include -X GET http://127.0.0.1:5000/api/v1/users/ \
                --header Origin:www.examplesite.com
            HTTP/1.0 200 OK
            Access-Control-Allow-Headers: Content-Type
            Access-Control-Allow-Origin: *
            Content-Length: 21
            Content-Type: application/json
            Date: Sat, 09 Aug 2014 00:26:41 GMT
            Server: Werkzeug/0.9.4 Python/2.7.8

            {
                "success": true
            }

        """
        return jsonify(user="joe")

    @app.route("/api/v1/users/create", methods=['POST'])
    def create_user() -> Response:
        """
            Since the path matches the regular expression r'/api/*', this resource
            automatically has CORS headers set.

            Browsers will first make a preflight request to verify that the resource
            allows cross-origin POSTs with a JSON Content-Type, which can be simulated
            as:
            $ curl --include -X OPTIONS http://127.0.0.1:5000/api/v1/users/create \
                --header Access-Control-Request-Method:POST \
                --header Access-Control-Request-Headers:Content-Type \
                --header Origin:www.examplesite.com
            >> HTTP/1.0 200 OK
            Content-Type: text/html; charset=utf-8
            Allow: POST, OPTIONS
            Access-Control-Allow-Origin: *
            Access-Control-Allow-Headers: Content-Type
            Access-Control-Allow-Methods: DELETE, GET, HEAD, OPTIONS, PATCH, POST, PUT
            Content-Length: 0
            Server: Werkzeug/0.9.6 Python/2.7.9
            Date: Sat, 31 Jan 2015 22:25:22 GMT

            $ curl --include -X POST http://127.0.0.1:5000/api/v1/users/create \
                --header Content-Type:application/json \
                --header Origin:www.examplesite.com

            >> HTTP/1.0 200 OK
            Content-Type: application/json
            Content-Length: 21
            Access-Control-Allow-Origin: *
            Server: Werkzeug/0.9.6 Python/2.7.9
            Date: Sat, 31 Jan 2015 22:25:04 GMT

            {
              "success": true
            }

        """
        return jsonify(success=True)

    @app.route("/api/exception")
    def get_exception() -> str:
        """
            Since the path matches the regular expression r'/api/*', this resource
            automatically has CORS headers set.

            Browsers will first make a preflight request to verify that the resource
            allows cross-origin POSTs with a JSON Content-Type, which can be simulated
            as:
            $ curl --include -X OPTIONS http://127.0.0.1:5000/api/exception \
                --header Access-Control-Request-Method:POST \
                --header Access-Control-Request-Headers:Content-Type \
                --header Origin:www.examplesite.com
            >> HTTP/1.0 200 OK
            Content-Type: text/html; charset=utf-8
            Allow: POST, OPTIONS
            Access-Control-Allow-Origin: *
            Access-Control-Allow-Headers: Content-Type
            Access-Control-Allow-Methods: DELETE, GET, HEAD, OPTIONS, PATCH, POST, PUT
            Content-Length: 0
            Server: Werkzeug/0.9.6 Python/2.7.9
            Date: Sat, 31 Jan 2015 22:25:22 GMT
        """
        raise Exception("example")

    @app.errorhandler(500)
    def server_error(e: Exception) -> tuple[str, int]:
        logging.exception('An error occurred during a request. %s', e)
        return "An internal error occurred", 500

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