python - 如何将cookie从flask设置为reactjs

Question

我正在做一个项目，我使用 flask 作为后端，使用 reactjs 作为前端。当我尝试从 Flask 设置 cookie 时，cookie 未在浏览器上设置。我一直在研究可能出了什么问题。我在 flask 中有一个端点 /login ，当用户从 reactjs 登录时，会创建一个 JWT 并设置一个 cookie。我的 Flask 应用程序在 5000 端口 上运行，我的 React 应用程序在 3000 端口 上运行。在我研究这个问题的过程中，我遇到了多种解决方案，但它们仍然没有用，比如设置 CORS(app, support_credentials=True) 并且还包括 domain 关键字参数 在设置 cookie 中。
这是我的 flask 应用程序中的代码:

# login route - this will set cookie (JWT token)
@app.route('/login', methods=['POST'])
@cross_origin()
def login():
    auth = request.authorization

    # the auth should have a username and a password
    user = User.query.filter_by(username=auth['username']).first()

    if not user:
        return jsonify({'msg': 'user not found'}), 404

    if bcrypt.check_password_hash(user.password, auth['password']):
        # generate a token
        access_token = create_access_token(identity=user.username, expires_delta=datetime.timedelta(days=1))
        
        response = make_response({'msg': 'successfully logged in!'})
        response.headers['Access-Control-Allow-Credentials'] = True
        response.set_cookie('access_token', value=access_token, domain='127.0.0.1:3000')

        # we need to convert the response object to json

        return jsonify({'response': response.json}), 200

    return jsonify({'msg': 'wrong credentials'}), 401

Answer 1

所以我弄清楚出了什么问题，在进入细节之前，这里有两个很棒的视频解释了 CORS 以及如何使用它们

• fetch, CORS and cookies

• learn CORS in 6 minutes

现在，以上两个教程不是特定于 Flask 的，但它们非常相关对于 flask，我们使用 flask-cors 库来允许 CORS。在我的代码中，我有一个 /login 端点，如果用户登录，将生成一个响应对象并设置一个包含 JWT 的 cookie。这里的主要焦点是 @cross_origin() 装饰器，这就是使 CORS 成为可能的原因，但是在这里我们仍然需要设置一些东西，一些 kwargs，最重要的是 support_credentials =真默认情况下，Flask-CORS 不允许跨站点提交 cookie，因为它具有潜在的安全隐患。要允许跨源发出 cookie 或经过身份验证的请求，只需将 supports_credentials 选项设置为 True。对于我的代码，这是我添加的内容。

@cross_origin(methods=['POST'], supports_credentials=True, headers=['Content-Type', 'Authorization'], origin='http://127.0.0.1:5500')

当然，即使在此之后，出于某种原因，它仍然无法正常工作。我没有返回包含所有 header 的实际响应对象。从我的代码来看，我必须更改的另一件事是

来自

return jsonify({'response': response.json}), 200

到

return response, 200

出于测试目的，我制作了另一个简单的端点 /user，它简单地返回存储在浏览器中的 cookie。

@app.route('/user')
@cross_origin(supports_credentials=True)
def get_user():
    response = make_response('cookie being retrieved!')
    cookie = request.cookies.get('access_token')
    return jsonify({'cookie': cookie})

知道如何配置前端来处理请求也很重要。所以这是我开发的一个简单的 javascript 代码来测试 api，使用 fetch api

// for logging in a user
fetch('http://127.0.0.1:5000/login', {
                headers: {'Authorization': 'Basic ' + btoa(`${username}:${password}`)}, // the values of username and password variables are coming from a simple login form
                method: 'POST',
                mode: 'cors' // here we specify that the method is CORS meaning that the browser is allowed to make CORS requests
            })
            .then(res => res)
            .then(data => console.log(data))

// for getting the cookies - testing
                fetch('http://127.0.0.1:5000/user', {
                method: 'GET',
                mode: 'cors',
                credentials: 'include' // includes cookies, authorization in request headers
            })
            .then(res => res.json())
            .then(msg => console.log(msg))

我希望这对其他人有帮助:)