此 set-cookie 已被阻止，因为它具有 samesite=lax答案

【问题标题】：this set-cookie was blocked because it has the samesite=lax此 set-cookie 已被阻止，因为它具有 samesite=lax
【发布时间】：2020-12-20 14:51:36
【问题描述】：

您好，我有烧瓶后端和 vue 前端，我无法在浏览器中设置 cookie。当我将 cookie 从烧瓶发送到 vue bruser 时，请给我担心：

此 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

【问题讨论】：

标签： vue.js flask cookies samesite

【解决方案1】：

这对我有用（使用 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>

【讨论】：

【解决方案2】：

尝试将SameSite 属性设置为None 并使用https。

【讨论】：

它是这样工作的，但这样安全吗？
@Cozdemir 我认为使用 https 会很安全。 :)