在 PHP 服务器上获取本地资源

Question

我正在开发一个小型准系统 PHP 后端（无框架）和一个 React 前端应用程序作为练习。非常基本的东西，React 应用程序上的一些组件通过带有获取请求的 useEffect 钩子调用 PHP 后端 API 上的路由。

一切顺利，但我在使用 JWT 的经过身份验证的请求时遇到了一些麻烦。我正在使用内置 PHP 服务器（php -S localhost:8080）运行 PHP 服务器。这是我发送的请求：

    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 东西和标头配置的不同组合，但是我没主意了。

Answer 1

从表面上看，这没有多大意义...不记名令牌仅通过 HTTPS (SSL) 发送，但您正在使用 HTTP。

此外，在您的 fetch 请求中，您已设置

crossDomain: true

AFAIK 这不是 fetch API 的有效选项。请参阅https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

查看它，您应该将

credentials

设置为

include

，例如

    fetch('http://localhost:8080/api/cart/current', {
        headers: {
            "Authorization": 'Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpZCI6MiwibmFtZSI6IlNyIENsaWVudGUiLCJlbWFpbCI6ImNsaWVudEBtYWlsLmNvbSIsImNyZWF0ZWQiOiIyMDIzLTEwLTExIDIwOjE1OjM1Iiwicm9sZSI6IkNMSUVOVCJ9.5m_IOjFa_DeTwzIeZk5adhQQY5O_PYrVpcR2StbwUas',
            'Accept': 'application/json',
            'Content-Type': 'application/json'
        },
        credentials: 'include', // Include credentials with the request
        method: 'GET'
    })

因此，您需要修改您的获取并使用 HTTPS (SSL) 进行承载身份验证才能按预期工作。