Access-Control-Allow-Credentials problems React - reactjs

Question

Here is a project to create a login system using react. However when it connects to the back-end flask to check whether the login is valid or not, it shows the error message below. Hope someone can help me. I spent so many days trying to fix this and search every related post but still couldn't fix it :(
I'm using the chrome browser.
Also, I have installed the Access-Control-Allow-Origin plugin on chrome.
error message
Access to fetch at 'http://localhost:5000/login' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Credentials' header in the response is '' which must be 'true' when the request's credentials mode is 'include'.
front-end code (react)
fetch(domain+"/login", {
body: JSON.stringify(mydata),
credentials: "include",
headers: new Headers({
'Content-Type': 'application/json',
'Access-Control-Allow-Credentials': true
}),
method: 'POST', // *GET, POST, PUT, DELETE, etc.
mode: 'cors', // no-cors, cors, *same-origin
redirect: 'follow', // manual, *follow, error
referrer: 'no-referrer', // *client, no-referrer
})
.then(response=>{
if(response.ok){
return response.json()
}
}
back-end(flask) include below code to allow cross origin
app = Flask(__name__)
CORS(app, supports_credentials=True)
#app.route('/login', methods=['GET', 'POST'])
def login():
data = request.json
print(data)
result = {}
login_info = {
"code": -1,
"message": ""
}
if data:
username = data['username']
password = data['password']
cur = database.cursor(dictionary=True)
cur.execute(
"SELECT username, password, role FROM user WHERE username = %s AND password = %s AND disabled = 0;", (username, password))
# cur.execute("SELECT uid, displayname, rank, disabled FROM user WHERE username = %s AND password = %s;", (username, password,))
# cur.execute("SELECT uid, displayname, rank, disabled FROM user WHERE username = %s AND password = AES_ENCRYPT(%s, UNHEX(SHA2('encryption_key', )));", (username, password,))
account = cur.fetchone()
if account:
# modify_info(1, "Login successfully!")
login_info["code"] = 1
login_info["message"] = "Login successfully!"
account_str = json.dumps(account, cls=MyEncoder)
account_json = json.loads(account_str)
session["username"] = account_json["username"]
result["username"] = username
result["role"] = account_json["role"]
result["isLogin"] = 1
else:
# modify_info(0, "Login not successful")
login_info["code"] = 0
login_info["message"] = "Login not successful"
cur.close()
return jsonify({"code": login_info["code"], "data": result, "message": login_info["message"]})

Answer 1

In the specification, the Access-Control-Allow-Credentials: true header is not allowed to use with
the Access-Control-Allow-Origin: * header.
However, * is the default value for the origin header in flask cors, you should set it to a specific value, for example:
app = Flask(__name__)
CORS(app, origins=['http://localhost:3000'], supports_credentials=True)
Also, here is link to the document about it: https://flask-cors.readthedocs.io/en/latest/api.html
Update
It seems like the samesite of the cookie problem, here's the code to set it:
from flask import Flask, make_response
from flask_cors import CORS
app = Flask(__name__)
CORS(app, supports_credentials=True)
#app.route("/", methods=['POST'])
def index():
res = make_response()
res.set_cookie("name", value="I am cookie", samesite='Lax')
return res, 500
app.run(debug=True)