为什么Flask不使用VueJS ` `npm run 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