为什么 Flask 不保留与 VueJS `npm 运行 serve` 前端的会话？

Question

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

我正在尝试使用 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。有什么建议么？

Answer 1

通过从 Flask 添加反向代理解决。我已将它添加到我的 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

为什么 Flask 不保留与 VueJS `npm 运行 serve` 前端的会话？

Why Flask doesn't persists sessions with VueJS `npm run serve` frontend?

session

flask

vue.js

flask-restplus