Reactjs 无法使用Flask JWT Extended、React和Axios在Chrome中设置Cookie

背景和问题

我有一个Flask后端在localhost:5000上运行，还有一个React SPA在localhost:3000上运行。 我能够让他们说话，但当试图将Flask生成的令牌存储到浏览器的cookies中时1）在执行

console.log（response）

时，响应头不包含任何cookies，在从

axios

成功发布后2）cookies未被设置。但是当检查network>Login.js头时，我实际上可以看到

Set Cookie

键作为响应头存在。我已经尝试过谷歌和StackOverflow的多种解决方案，但这里似乎没有任何解决方案，我真的不知道是怎么回事，因为请求成功了，Chrome允许第三方软件设置cookies。甚至我也可以从Network>Login.js标题中看到令牌

步骤

1） 用户输入用户名和密码，然后点击登录

2） Axios POST呼叫是对Flask的后端进行的

3） 处理数据并生成两个令牌，并将它们设置为cookie

---

4） 浏览器的cookie设置了少量令牌 因此问题来自

localhost

我有一个Flask后端在localhost:5000上运行，还有一个React SPA在localhost:3000上运行

从上面的语句中，非常具体地说，我在localhost:5000上运行后端，在127.0.0.1:3000上运行React SPA

一旦我将

127.0.0.1

更改为

localhost

，它就像一个魔咒

---

另外，在玩了

CORS

之后，我认为使用

Nginx

和

proxy\u pass

将来自React SPA的请求传递到后端会容易得多，以避免完全使用

CORS

，因为如果必须在不同的环境（如测试）中使用

CORS

，在登台和etcs中，必须在web服务器级别设置

CORS

，例如

Nginx

，并且它需要的配置与我为本地环境设置的配置稍有不同。

如果我是你，我会在json响应中发送令牌，并在前端设置cookie。如果不使用UI请求，api会更干净。您好，我和您有完全相同的问题。我所有的配置都和你的相似。。。你知道问题出在哪里吗？

# app_config related to flask-jwt-extended
CORS_HEADERS = "Content-Type"
JWT_TOKEN_LOCATION = ["cookies"]
JWT_COOKIE_SECURE = False
JWT_COOKIE_CSRF_PROTECT = True



# post method from flask-restful for LoginAPI class
def post(self):
    email = request.json.get("email")
    password = request.json.get("password")

    # some processing here.....
    payload = {
        "email": email
    }

    access_token = create_access_token(identity=payload)
    refresh_token = create_refresh_token(identity=payload)

    response = jsonify({"status": True})
    set_access_cookies(response, access_token)
    set_refresh_cookies(response, refresh_token)

    return response

# in below code, I had some issues with putting wildcard (*) into origin, so I've specified to the React SPA's host and port.
CORS(authentication_blueprint, resources={r"/authentication/*": {"origins": "http://localhost:3000"}},
     supports_credentials=True)

# also tried `axios.defaults.withCredentials = true;` but same result.
export const login = (email, password, cookies) => {
return dispatch => {
    const authData = {
        email: email,
        password: password
    };

    let url = 'http://127.0.0.1:5000/authentication/login/';

    axios.post(url, authData, {withCredentials: true)
        .then(
            response => {
                console.log(response)
            })
        .catch(err => {
            console.log(err)
        });

    dispatch(authSuccess(email, password));
    }
};