此 set-cookie 被阻止，因为它具有 SameSite=lax

Question

你好，我有 Flask 后端和 Vue 前端，我无法在浏览器中设置 Cookie。当我从 Flask 向 Vue bruser 发送 Cookie 时，我很担心：

此 set-cookie 被阻止，因为它具有 Samesite=lax 属性，但来自跨站点响应，但不是对顶级导航的响应

代码：

    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

Answer 1

尝试将

SameSite

属性设置为

None

并使用 https。

Answer 2

这对我有用（使用 Firefox 作为浏览器进行测试）。 该 cookie 显示为保存在浏览器的开发工具“存储”中。 即使在端口 5000 访问 Flask 应用程序也会在浏览器中设置 cookie。

按照您的描述使用烧瓶应用程序：

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()

...以及使用此模板进行测试的 Vue 应用程序（使用 axios 访问 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>

Answer 3

您可以为前端配置代理。它还允许您使用同站点 Lax。虽然 API 调用是从您的前端代理的，但它很安全。