Flask Session Don't Persist Data

I have a Javascript application and a Flask application. When the user send data from Js to Flask, I store it on session and it works fine at a specific route: @app.route(...) def

Solution 1:

TL;DR, enable CORS and credentials support on the back end, and use credentials in the front end code when issuing requests.

I recently ran into a similar issue where I was developing a front end and a back end in separate apps. I noticed that each time I issued a request from the front end client, it would create a new session for each request, which would rapidly bloat the session storage on the back end and made user tracking difficult if not impossible.

I'm assuming that you're Javascript app and Flask app are running separately (i.e., the javascript is not on a template being served by the Flask app and hence the js requests are coming from a different origin).

Suppose we have a simple app with Flask-Session enabled running on port 5000:

from flask import Flask, session
from flask_session import Session

app = Flask(__name__)

SECRET_KEY = "changeme"
SESSION_TYPE = 'filesystem'
app.config.from_object(__name__)
Session(app)

@app.route('/foo')deffoo():
    return session.sid


@app.route('/bar')defbar():
    return session.sid

Now if we run the app if we navigate to either route on a browser(e.g., http://localhost:5000/foo), we would get the same session id. If you open another tab, open the developer tools and issue the following command in the console, you'd get a cors error:

// Using fetch, you can use jquery or axios    fetch("http://localhost:5000/foo").then(response => {
    return response.text()
}).then(data => {
    console.log(data)
})

You can fix this easily by installing Flask-CORS and wrapping your app in the CORS class:

from flask import Flask, session
from flask_session import Session
from flask_cors import CORS

app = Flask(__name__)

SECRET_KEY = "changeme"
SESSION_TYPE = 'filesystem'
app.config.from_object(__name__)
Session(app)
CORS(app)

@app.route('/foo')deffoo():
    return session.sid


@app.route('/bar')defbar():
    return session.sid

Now if you run the javascript fetch function above, it prints out a different session id each time the request is invoked, even for the same route. That's because Flask can't track the session unless you're issuing the requests from the same origin or unless you provide some way for flask to identify the session. You can do this from your JS by allowing credentials to be passed:

fetch("http://localhost:5000/foo",
    { credentials: 'include' }).then(response => {
        return response.text()
}).then(data => {
    console.log(data)
})

However, you will get another CORS error regarding Access-Control-Allow-Credentials. You can fix this in you're Flask app by import the cross_origin decorator, wrapping your routes in the decorator and passing supports_credentials=True to the decorator. The flask code would look something like this:

from flask import Flask, session
from flask_session import Session
from flask_cors import CORS, cross_origin

app = Flask(__name__)

SECRET_KEY = "changeme"
SESSION_TYPE = 'filesystem'
app.config.from_object(__name__)
Session(app)
CORS(app)

@app.route('/foo')@cross_origin(supports_credentials=True)deffoo():
    return session.sid


@app.route('/bar')@cross_origin(supports_credentials=True)defbar():
    return session.sid

Now flask can track the session by the requester (in this case, the browser running the Javascript app).

Solution 2:

I had the same problem using classic post request in html. The session, which was still storing values in previous route, would empty itself after my post request.

I solved this using:

app.config.update(SESSION_COOKIE_SAMESITE="None", SESSION_COOKIE_SECURE=True)

I am sharing this in case others are facing the same issue.