VueJS and Flask sessions: new session each request

Question

I have a VueJS app using vue-resource that is built on a Flask webserver. I am trying to use flask sessions to store non-sensitive data.

Request.vue:

this.$http.post('/additem', postData)
.then(function success(res) {
  console.log('all items after add:', res.body);
});

routes.py:

APP.config.update(
    SESSION_COOKIE_HTTPONLY=False,
    SECRET_KEY='speakfriend'
    )


@APP.route('/', methods=['GET'])
def index():
    return render_template('index.html', rawsettings=config)

@APP.route('/additem', methods=['POST'])
def add_item():
    entity_id = request.form.get('entity_id')
    session['items'].append(entity_id)
    print('items: {}'.format(session['items']))
    session.modified = True
    return jsonify(session['items'])

Each time I hit the /additem route, the response Set-Cookie header is a different session key from the one sent in the request header. What am I missing?

Answer 1

In my case, the problem was colliding sessions. The vue app also makes calls to a flask api, which sets its own session. The SECRET_KEYs were different. So, when there was an api call between webserver calls (or visa versa) the session could not be decrypted and new (empty) data were returned, as if we'd never been there.

Setting the secret_keyto be the same secret did the trick.