Vue.js 此集cookie已被阻止，因为它具有samesite=lax

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

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

代码：

---

尝试将

SameSite

属性设置为

None

并使用https。

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

如您所述，使用flask应用程序：

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应用程序）：

{{backend_result}}

从“axios”导入axios；
导出默认值{
名称：“应用程序”，
数据（）{
返回{
后端\u结果：“”
}
},
方法：{
测试（）{
axios.get(
'http://localhost:5000/',
{withCredentials:true}
).那么(
结果=>{
console.log（结果）
this.backend_result=result.data
}
)
}
}
}

它是这样工作的，但这种方式安全吗？

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

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