曲奇不发送交叉来源的反应瓶应用程序
我目前正在构建一个ReactJS (前端在"https://www.example.com")瓶(后"https://server.example.com")应用程序。react客户端向我的烧瓶服务器发出GET和POST请求，但首先，必须对请求进行身份验证。我使用https://www.example.com"-CORS只接受来自"CORS_SUPPORTS_CREDENTIALS“的请求。我在服务器上启用了”CORS_SUPPORTS_CREDENTIALS“，而在客户端，我将获取请求设置为”凭据：‘包括’“。
server.py
import os
import functools
from flask import Flask, Blueprint, request, make_response
from flask_cors import CORS
from .config import Config
# Application factory pattern
def create_app():
config_object = Config()
app = Flask(__name__)
# Cross-Origin Config
CORS(app,
origins=[config_object.CORS_ALLOW_ORIGIN], # https://www.example.com
supports_credentials=config_object.CORS_SUPPORTS_CREDENTIALS # True
)
app.config.from_object(config_object)
app.register_blueprint(main)
return app
# Cookie authentication
def auth_required(view):
@functools.wraps(view)
def wrapped_view(**kwargs):
user_cookie = request.cookies.get('USER_ID_COOKIE')
session_cookie = request.cookies.get('USER_SESSION_COOKIE')
is_authenticated = verify_user_session(user_cookie, session_cookie) # T/F if this is a valid user
if is_authenticated:
# Continue to route...
return view(**kwargs)
else:
# Reject request...
response = make_response({"flash": "User not logged in."}, 403)
return response
return wrapped_view
bp = Blueprint('main', __name__)
@bp.get('/main/protected')
@auth_required
def get_protected_data():
response = make_response({"fakeData": "Do you believe in life after love?"}, 200)
return response
app = create_app()
if __name__ == "__main__":
app.run()snippet_from_protected_client.js
const MainPage = ({ setFlashMessages }) => {
let statusOK;
let statusCode;
const isStatusOK = (res) => {
statusOK = res.ok;
statusCode = res.status;
return res.json();
}
const [data, setData] = useState(null);
useEffect(() => {
fetch(process.env.REACT_APP_SERVER + '/main/protected', { // REACT_APP_SERVER=https://server.example.com
credentials: 'include'
})
.then(isStatusOK)
.then(data => {
if (statusOK) {
setData(data.fakeData);
} else if (statusCode === 403) {
setFlashMessages(data.flash);
}
});
}, []);
return (
<main>
<div className="container-md">
<div className="row">
<div className="col-md-1"></div>
<div className="col-md-11 mt-5">
<h1 className="text-start">My Account</h1>
<p className="text-start">Just some filler text here.</p>
<p className="text-start">{ data }</p>
</div>
</div>
</div>
</main>
);
}
export default MainPage;希望你能理解我的想法--我已经删减了很多，但保留了主要的功能，这给了我这个问题。所以现在，问题是：
我的cookie已经创建并保存在浏览器中，它是用JS库js-cookie设置的，如下所示：
snippet_from_login_client.js
Cookies.set('USER_ID_COOKIE', '1', { sameSite: 'none', secure: true}) // again, example
Cookies.set('USER_SESSION_COOKIE', 'ARanDomStrInGSetDURingLoGiNANDSTOrEDinTHESERVERDB', { sameSite: 'none', secure: true}) // again, example我知道它们已经设置好了，因为我可以在开发工具中看到它们。但是，在随后对受保护路由的请求中，服务器接受请求(这意味着它不是CORS源问题)，但是@auth_required抛出403 (如上面所示)。在检查我的浏览器开发工具中的请求头之后，我可以看到请求没有随cookie一起发送！
从浏览器开发工具请求标头
* Accept: */*
* Accept-Encoding: gzip, deflate, br
* Accept-Language: en-US,en;q=0.9
* Connection: keep-alive
* Host: server.example.com
* Origin: https://www.example.com
* Referer: https://www.example.com/
* Sec-Fetch-Dest: empty
* Sec-Fetch-Mode: cors
* Sec-Fetch-Site: cross-site
* Sec-GPC: 1
* User-Agent: *DEVICE-DATA*注意没有Cookie: --头，尽管设置了cookies .
为什么我的饼干不送？任何提示或线索都是非常有用的。
回答 1
Stack Overflow用户
发布于 2021-08-01 10:49:57
我解决了问题！我应该将我的cookie域设置为“.example.com”，以便客户端将它们附加到每个请求中。下面是如何使用js-cookie实现的。
Cookies.set('USER_ID_COOKIE', '1', { domain: '.example.com', sameSite: 'none', secure: true}) // again, example我不知道如何在不相关的域之间发送cookie，但是如果您的服务器和客户端被格式化为'server.domain.com‘和'client.domain.com'，那么这个解决方案应该适用于您。希望这能帮上忙！
https://stackoverflow.com/questions/68605420
复制相似问题
腾讯云开发者
