Hola, tengo el back-end del matraz y el frente de vue y no puedo configurar la cookie en el navegador. Cuando envío una cookie del matraz a vue bruser, me da un mensaje:
Esta cookie configurada se bloqueó porque tiene el atributo samesite=lax pero proviene de una respuesta entre sitios que no fue la respuesta a la navegación de nivel superior
Código:
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, 200Intente establecer la propiedad SameSite en None y use https.
Esto funciona para mí (probado usando Firefox como navegador). La cookie aparece como guardada en el "almacenamiento" de la herramienta de desarrollo del navegador. Incluso acceder a la aplicación Flask en el puerto 5000 establece la cookie en el navegador.
Usando la aplicación del matraz tal como lo describiste:
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()... y una aplicación Vue que usa esta plantilla para probar (usando axios para acceder a la aplicación Flask):
<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>