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
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, 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>