enable_cors_flask.md

Fast way to enable CORS in Flask

Cross-Origin Resource Sharing (CORS) is a mechanism that uses additional HTTP headers to tell browsers to give a web application running at one origin, access to selected resources from a different origin. A web application executes a cross-origin HTTP request when it requests a resource that has a different origin (domain, protocol, or port) from its own. [1]

Lets create a simple Flask server called app.py:

from flask import Flask, jsonify


@app.route("/", methods=["GET"])
def get_example():
    """GET in server"""
    response = jsonify(message="Simple server is running")
    return response

@app.route("/", methods=["POST"])
def post_example():
    """POST in server"""
    return jsonify(message="POST request returned")

if __name__ == "__main__":
    app.run(host="0.0.0.0", port="5000", debug=True)

If you are building an React app and using axios library, GET requests to server will look something like this:

import axios from "axios"

const apiURL = "http://localhost:5000"

axios
    .get(apiURL)
        .then((response) => {
            setState(response.message);
        })
    .catch((error) => {
        console.log(error);
    });

But without CORS enabled, the browser will block the server's response for security reasons. To receive data using a React application, CORS must be enabled.

To enable CORS in GET responses on the server, you can simply add a header in response:

@app.route("/", methods=["GET"])
def get_example():
    """GET in server"""
    response = jsonify(message="Simple server is running")
    
    # Enable Access-Control-Allow-Origin
    response.headers.add("Access-Control-Allow-Origin", "*")
    return response

After response.headers.add("Access-Control-Allow-Origin", "*"), all GET requests will be accepted.

To enable requests like POST, PUT, DELETE, etc., the easiest way is to install Flask-CORS (https://flask-cors.readthedocs.io/en/latest). To install Flask-CORS using pip:

pip install flask-cors

In an example of a POST request, simply add the decorator @cross_origin in the function beginning:

@app.route("/", methods=["POST"])
@cross_origin()
def post_example():
    """POST in server"""
    return jsonify(message="POST request returned")

There you go. Now your React app can communicate, receive and send information to the server using all HTTP methods, including POST, PUT, DELETE and more.

Have a nice day!