关于vue与Python前后端cookie交互问题

关于vue与Python前后端cookie交互问题

近几天做了一个使用Vue前端，Python的flask做后台的网站，但flask发送的set-cookie在前端因为谷歌浏览器内核对Samesite做了限制（主要跨域问题）所以浪费了很多时间解决它，最后通过查阅官方文档解决。特此记录供大家参考！

Set-Cookie 选项
这些选项可以被添加到一个 Set-Cookie 头部以增强其安全性。 Flask 具有将 其配置于会话 cookie 上的配置选项。它们也可以配置在其他 cookie 上。

• Secure 限制 cookies 仅用于 HTTPS 流量。
• HttpOnly 保护 cookies 内容不被 JavaScript 读取。
• SameSite 限制如何从外部网站通过请求发送 cookie。可以设置为 ‘Lax’ （推荐）或者 ‘Strict’ 。
  Lax防止从外部网站通过有 CSRF 倾向请求（比如一个表单）发送 cookie 。 Strict 防止通过所有外部请求发送cookie，包括常规连接。

app.config.update(
    SESSION_COOKIE_SECURE=True,
    SESSION_COOKIE_HTTPONLY=True,
    SESSION_COOKIE_SAMESITE='Lax', # 此处需要修改为None
)
# 上述放在app.py中即可
response.set_cookie('username', 'flask', secure=True, httponly=True, samesite='Lax')

解决跨域问题

@app.after_request
def af_req(resp):  #解决跨域session丢失
    resp = make_response(resp)
    resp.headers['Access-Control-Allow-Origin'] = 'http://localhost:8080'
    resp.headers['Access-Control-Allow-Methods'] = 'PUT,POST,GET,DELETE,OPTIONS'
    #resp.headers['Access-Control-Allow-Headers'] = 'x-requested-with,content-type'
    resp.headers['Access-Control-Allow-Headers'] = 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild'
    resp.headers['Access-Control-Allow-Credentials'] = 'true'

    resp.headers['X-Powered-By'] = '3.2.1'
    resp.headers['Content-Type'] = 'application/json;charset=utf-8'
    return resp

返回数据使用的方法

	result = {'info': 'nice~登录成功！', 'result': 'success'}
	rst = make_response(result)
	return rst

另外，后台设置了session后，在另外的请求中并不能get到session的值，通过百度，得知需要在cookie中传递值，所以产生了上述的一系列问题。不强制要求Samesite的浏览器可以不修改Samesite直接使用。虽然暂时解决了问题，但是办法可能不是最好的，如果大佬有更好的方法可以留言告知，感谢大佬！

官方文档链接