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

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


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


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, jsonifyfrom flask_cors import CORSapp = 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, 200if __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>