为什么 Flask 不与 VueJS `npm run serve` 前端保持会话？答案

【问题标题】：Why Flask doesn't persists sessions with VueJS `npm run serve` frontend?为什么 Flask 不与 VueJS `npm run serve` 前端保持会话？
【发布时间】：2020-02-09 00:49:11
【问题描述】：

我有一个简单的应用程序，后端有 Flask 和 Rest-Plus，而 VueJS 前端由 VueCLI 3 生成。

我正在尝试使用 Flask-Session 设置会话，但保存在一个请求中的会话变量在另一个请求中不可用。

我尝试了很多选择，但仍然一无所获。

这是我的vue.config.js：

module.exports = {
    devServer: {
        public: "localhost:8080",
        headers: {
            "Access-Control-Allow-Origin": "*",
            "Access-Control-Allow-Credentials": "true",
            "Access-Control-Allow-Headers": "Content-Type, Authorization, x-id, Content-Length, X-Requested-With",
            "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, OPTIONS"
        },
        proxy: {
            '/api*': {
                // Forward frontend dev server request for /api to django dev server
                target: 'http://localhost:5000/'
            }
        }
    }
}

在我的app.py 我已经设置了密钥和cors：

app.secret_key = "super_secret"
CORS(app, automatic_options=True, support_credentials=True)

另外，我在请求处理程序中添加了装饰器：

@cross_origin(supports_credentials=True)
def get(self):

仍然一无所获。在 /login 我设置了 session['aaa']=1 在另一个请求中我得到了 KeyError。

我通过npm run serve 运行前端，通过flask run 运行后端。有什么建议么？

【问题讨论】：

标签： vue.js session flask flask-restplus

【解决方案1】：

通过从烧瓶添加反向代理解决。我已将其添加到我的 app.py 中，因此它将所有请求传递给前端。

如果您将在开发时使用此解决方案，请不要忘记在部署到生产服务器之前删除此端点。

@app.route('/dev', methods=['GET'])
@app.route('/js/<path:dummy>', methods=['GET'])
def proxy(dummy=None):
    if request.method == 'GET':
        resp = requests.get(request.base_url.replace('5000', '8080'))
        excluded_headers = ['content-encoding', 'content-length', 'transfer-encoding', 'connection']
        headers = [(name, value) for (name, value) in resp.raw.headers.items() if name.lower() not in excluded_headers]
        response = Response(resp.content, resp.status_code, headers)
    return response

【讨论】：