我们正在开发一个带有 python flask 后端的 React 应用程序。通常一切正常,但是当将它放在具有客户端证书要求的服务器后面时,它几乎可以正常工作。它在 Chrome 中运行良好,但在 Firefox 中运行不佳。
在浏览器中输入 URL 时发送证书,从 React 发出请求时不发送证书。
- 主请求正常完成,页面显示。
- 加载页面时向后端发出请求,/backend/version。
- 请求失败,nginx 提示
<html>
<head><title>400 No required SSL certificate was sent</title></head>
<body bgcolor="white">
<center><h1>400 Bad Request</h1></center>
<center>No required SSL certificate was sent</center>
<hr><center>nginx/1.10.3</center>
</body>
</html>
- 当我打开 devtools 并粘贴相同的 url 时,它工作正常。客户端证书由浏览器发送。
我们如何提出请求:
const fetchVersion = () => (dispatch, getState) => {
return dispatch({
[CALL_API]: {
endpoint: `${API_ROOT}/version`,
method: 'GET',
headers: {
"Authorization": authHeader(),
},
types: [FETCH_VERSION_REQUEST,
{
type: FETCH_VERSION_SUCCESS,
payload: (action, state, res) => {
const contentType = res.headers.get('Content-Type');
if (contentType && ~contentType.indexOf('json')) {
return res.json().then(json => json.response);
}
},
},
{
type: FETCH_VERSION_FAILURE,
meta: (action, state, res) => checkIfInvalidToken(action, state, res, dispatch),
}
],
},
});
};
缺少什么?为什么 Firefox 不像 Chrome 那样将证书附加到请求中?
最佳答案
您可以尝试通过将 [CALL_API].credentials
值显式指定为 include
根据 the documentation
默认值为 omit
但 firefox 需要 include
始终发送 cookie,即使是跨源调用也是如此。
关于你问题中的例子,代码可能会变成这样:
[CALL_API]: {
endpoint: `${API_ROOT}/version`,
credentials: 'include',
method: 'GET',
headers: {
"Authorization": authHeader(),
},
...and so on
在一个纯实验目的的实验室中,我想我已经重现了您在 Chrome 和 Firefox 中报告的类似行为,并且在这个实验室中,credentials: 'include'
解决了问题:video available here .
关于javascript - 客户端证书javascript请求,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47036555/