Cookie与postman一起使用，但与vuejs不一起使用

Question

我有一个烧瓶服务器运行在http://127.0.0.1:5000和一个vuejs前端运行http://localhost:8080我已经做了api，并用postman测试了它，一切都如预期的那样工作：（

>

将请求发布到/登录-

（将请求发送至/登录）-

烧瓶API代码：

app = Flask(__name__)



SESSION_TYPE = 'redis'
app.config.from_object(__name__)
app.config.from_mapping(
    SECRET_KEY='dev'
)
app.config.update(SESSION_COOKIE_SAMESITE="None", SESSION_COOKIE_SECURE=True)
cross_origin(automatic_options=True)
app.config['CORS_HEADERS'] = 'Content-Type'
CORS(app, resources={r"/*": {"origins": "*"}},support_credentials=True)


## configure db
db = yaml.load(open('db.yaml'))
app.config['MYSQL_HOST'] = db['mysql_host']
app.config['MYSQL_USER'] = db['html" target="_blank">mysql_user']
app.config['MYSQL_PASSWORD'] = db['mysql_password']
app.config['MYSQL_DB'] = db['mysql_db']
mysql = MySQL(app)

## Homepage
@app.route('/index',methods=['GET'])
@cross_origin(supports_credentials=True,origin='http://localhost:8080/')
def index():
    if 'loggedin' in session:
        return jsonify({
            "msg":"user is logged in",
            "data":{
                "username":session['username'],
                "loggedin":True
            },
            "status":200
        })
    else:
        return jsonify({
            "msg":"user is not logged in",
            "data":{
                "username":None,
                "loggedin":False
            },
            "status":200
        })

## LOGIN 
@app.route('/login',methods=['GET','POST'])
@cross_origin(supports_credentials=True,origin='http://localhost:8080/')
def login():
    # print("initial check ",('loggedin' in session))
    if request.method == 'POST':
        req = request.get_json()
        username = req['username']
        password = req['password']
        cur = mysql.connection.cursor()
        if username == "" or password == "":
            return jsonify({
                'msg':'Username and password required',
                'status':401
            })

        user = cur.execute('SELECT * FROM user WHERE username =%s',(username,))
        userdetails = cur.fetchone()
        if user <=0 or not check_password_hash(userdetails[1],password):
            result = {
                'msg':'Incorrect username or password',
                'status':401
            }
            return jsonify(result)
        else:
            session.clear()
            session['username'] = userdetails[0]
            session['loggedin'] = True
            ## print("session username = ",session['username'])
            result = {
                'msg':"Successfully logged in",
                'status':200
            }
            print("inside login <loggedin> = ",('loggedin' in session))
            globallogin = True
            globalusername = userdetails[0]
            return jsonify(result)
            ## return redirect('/index')
    
    return jsonify({
        "msg":"get request at /login",
        "status":200
    }) 

登录。vue：

<template>
<div id = "login">
    <h1>Login page</h1>
    <label>Username</label>
    <input type="text" v-model="username">
    <label>Password</label>
    <input type="password" v-model="password">
    <button v-on:click="login()">Log in</button>
</div>
    
</template>

<script>
import axios from 'axios'
export default {
    data: function(){
        return{
            username:"",
            password:""
        }
    },
    methods:{
        resetform: function(){
            this.username = ""
            this.password = ""
            return
        },
        login: function(){
            const payload = {
                username:this.username,
                password:this.password
            }
            axios.post("http://127.0.0.1:5000/login",payload,{withCredentials: true})
            .then( (data) =>{
                console.log(data)
                if(data.data.status == 401){
                    alert(data.data.msg)
                    this.resetform()
                }
            }).catch( (err) => {
                console.log(err)
            })
        }
        
    },
    mounted() {
        axios.get("http://127.0.0.1:5000/login")
        .then((data)=>{
            console.log(data);
        })
    }
}
</script>

指数vue

<template>
    <h1>Index page</h1>
</template>

<script>
import axios from 'axios'
export default {
    mounted(){
        axios.get('http://127.0.0.1:5000/index').then((data)=>{
            console.log(data)
        }).catch((err)=>{
            console.log(err);
        })
    }
}
</script>

当我使用邮递员登录时，我得到的响应为成功登录；当我使用邮递员获取url/索引时，我得到“用户已登录”响应。数据但当我使用浏览器（chrome）从vuejs服务器登录时，我仍然在响应中获得“成功登录”。数据msg但当我转到/index时，我得到了“用户未登录”。

我注意到的另一件事是，在登录请求之后的postman中有一个set cookie头，cookie idset cookie=session=77e40d54-066c-48a7-9b2b-88f36d9a3b86；HttpOnly；Path=/但当我将vuejs的响应记录在标题字段中时，没有设置cookie标题（仅应用程序类型和内容长度）

Answer 1

在找不到工作解决方案后，我使用JWT解决了这个问题
docs：https://flask-jwt-extended.readthedocs.io/en/stable/

当客户机第一次发出请求时，flask服务器对客户机进行身份验证，如果成功进行身份验证，则发送jwt令牌和响应。客户端（vuejs）在对服务器的后续请求中使用此令牌，每次服务器验证标头是否包含该令牌时

Answer 2

我认为您在获取呼叫中丢失了{with凭证：true}，但我可能是错的。