Flask CORS

We will learn with this explanation about an issue that comes when we create API in the Flask app and how to fix an error when accessing a Flask app from a different domain.

Fix Cross-Origin Issues Using CORS Class in Flask

Sometimes we create an API, but we do not have any issue serving this to the user, but when we are going to be integrated with the front-end, this issue comes; this is a cross-origin request that we need to resolve.

We will be discussing how to resolve the issue reported from the front-end, normally front-end developers report, because initially when we create the API in Flask, we do not take a look at the steps that would be taken to resolve this CORS issue that stands for cross-origin resource sharing.

In the first step, we need to install an inbuilt module called Flask-Cors; once this module is installed, then we will use this in our application.

pip install Flask-Cors

Now we need to import CORS, and this module is responsible for all types of CORS issues; it will be able to resolve any request from the front-end.

from flask_cors import CORS

Now we need to create a Flask application and wrap that app into the CORS class so that this app will be responsible for accepting any request. It could be a direct request on the route or other requests.

from flask import Flask, Response
from json import dumps
from flask_cors import CORS

app = Flask(__name__)
CORS(app)


@app.route("/", methods=["GET"])
def User_Access():
    return Response(dumps({"User_KEY": "ADB11081"}), mimetype="text/json")


app.run(port=5000)

There are a few ways we can use this in our app; the simplest way is to wrap the whole app in the CORS() class; in the previous example, we have looked at how to do that.

Second, we can define which domain we want to give access to and what we are allowing some specific thing in our app.

Let’s create a variable called cors and then pass in a few options, the first one will be the app itself, and the second will be resources which is a keyword argument where we can specify what we want to allow access to.

We are using regular expressions, then inside the quotes, we will put a route, and after the slash, we can specify a specific user, or we can pass an asterisk sign to allow access to all users.

After that, we define what domains we will allow access to, so we have to type origins; then, we can give it a list of origins or domains that are allowed access.

In our case, we are passing it an asterisk sign for any domain across the internet that can access all of our API routes.

from flask import Flask, Response
from json import dumps
from flask_cors import CORS

app = Flask(__name__)


cors = CORS(app, resources={r"/*": {"origins": "*"}})


@app.route("/", methods=["GET"])
def User_Access():
    return Response(dumps({"User_KEY": "ADB11081"}), mimetype="text/json")


app.run(port=5000)

Now we will run the server, go to the browser, and then look at what is happening inside the developer mode. We can see that Access-Control-Allow-Origin is allowed for all domains.