CODEWITHSUNDEEP
vue.jsflaskcookiessamesite
Vova Bes
Vova Bes

Reputation: 153

this set-cookie was blocked because it has the samesite=lax

Hello i have flask back end and vue front and i can not set cookie in browser.When I send cookie from flask to vue bruser give me worrning:

This set-cookie was blocked because it has the samesite=lax attribute but come from cross-site response witch was not the response to top-level navigation

Code:

    from flask import Flask, make_response, jsonify
    from flask_cors import CORS


    app = Flask(__name__)
    CORS(app, supports_credentials=True, resources={r"/*": {"origins": "*"}})


    @app.route('/', methods=['GET'])
    def index():
        resp = make_response(jsonify({'message': 'Hello new flask'}))
        resp.set_cookie('key', 'hello', samesite='Strict', secure=True)
        return resp, 200

Upvotes: 15

Views: 21561

Answers (2)

Andreas Nicklaus
Andreas Nicklaus

Reputation: 11

This works for me (tested using Firefox as Browser). The cookie appears as saved in the browser's dev tool "storage". Even accessing the Flask app at port 5000 sets the cookie in the browser.

Using the flask app just as you described:

from flask import Flask, make_response, jsonify
from flask_cors import CORS

app = Flask(__name__)
CORS(app, supports_credentials=True, resources={r"/*": {"origins": "*"}})


@app.route('/', methods=['GET'])
def index():
    resp = make_response(jsonify({'message': 'Hello new flask'}))
    resp.set_cookie('key', 'hello', samesite='Strict', secure=True)
    return resp, 200


if __name__ == '__main__':
    app.run()

... and an Vue app using this template to test (using axios to access the Flask app):

<template>
  <div id="app">
    <input type="button" value="test" @click="test"/>

    <p>{{ backend_result }}</p>

  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: 'App',
  data() {
    return {
      backend_result: ''
    }
  },
  methods: {
    test() {
      axios.get(
          'http://localhost:5000/',
          {withCredentials: true}
      ).then(
          result => {
            console.log(result)
            this.backend_result = result.data
          }
      )
    }
  }
}
</script>

Upvotes: 0

coma
coma

Reputation: 183

Try to set the SameSite property to None and use https.

Upvotes: 2

Related Questions