我正在开发一个小型的准PHP后端(没有框架)和一个关于React的前端应用程序作为练习。非常基本的东西,React应用程序上的一些组件通过useEffect钩子和fetch请求调用PHP后端API上的路由。
一切都很顺利,但我在使用JWT的身份验证请求中遇到了一些麻烦。我运行的PHP服务器与内置的PHP服务器(php -S localhost:8080)。这是我发送的请求:
const fetchHeader = {
headers: {
"Authorization": 'Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpZCI6MiwibmFtZSI6IlNyIENsaWVudGUiLCJlbWFpbCI6ImNsaWVudEBtYWlsLmNvbSIsImNyZWF0ZWQiOiIyMDIzLTEwLTExIDIwOjE1OjM1Iiwicm9sZSI6IkNMSUVOVCJ9.5m_IOjFa_DeTwzIeZk5adhQQY5O_PYrVpcR2StbwUas',
'Accept': 'application/json',
'Content-Type': 'application/json'
}
}
useEffect(() => {
fetch('http://localhost:8080/api/cart/current', { fetchHeader, crossDomain: true, method: 'GET' })
.then((response) => response.json())
.then((data) => {
console.log(data)
//setOrder(data.content);
})
.catch((err) => {
console.log(err.message);
});
}, []);
在服务器上,我添加了这个来打印头,只是为了调试:
header("Access-Control-Allow-Origin: *");
header('Access-Control-Allow-Credentials: true');
header("Access-Control-Allow-Headers: *");
header("Access-Control-Allow-Methods: *");
header('Content-Type: application/json; charset=utf-8');
$headers = getallheaders();
$headers['X-Control_Property'] = 'X-Control_Property';
ksort($headers);
echo json_encode($headers, JSON_PRETTY_PRINT);
die();
使用Postman一切都很好,因为授权正在成功发送:
但是我注意到服务器端的输出有点不同
由于某种原因,认证显然没有被发送。我在这个问题上坚持了很长一段时间,搜索了很多解决方案,并尝试了几乎所有我找到的方法,比如在package.json上设置代理,http-proxy-middleware的东西和不同的头配置组合,但我没有办法了。
1条答案
按热度按时间mctunoxg1#
从表面上看,这没有多大意义.
此外,在您的获取请求中,您已将
crossDomain: true
AFAIK设置为获取API的无效选项。参见https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch查看它,您应该将
credentials
设置为include
,例如。因此,您需要修改您的获取并使用HTTPS(SSL)进行承载身份验证以按预期工作。