带有 React FrontEnd 的 PHP 后端 API - 当从 API 发出 React 请求时会出现 CORS 标头问题，但直接在 Web 浏览器中访问时不会出现问题

Question

我正在创建一个公告板系统，使用 PHP 后端作为 API，并使用 React 作为前端，向 PHP API 发出数据请求。

在我的 PHP 代码中，在我的 CoreMiddleware 类中：

/**
     * Middleware for handling CORS.
     *
     * @param Request $request the request object
     * @param callable $next the next middleware to execute
     * @return void
     */
    public function handle(Request $request, callable $next) {
        header('Cache-Control: no-cache, no-store, must-revalidate');
        header('Pragma: no-cache');
        header('Expires: 0');
        header('Access-Control-Allow-Origin: *'); 
        header('Access-Control-Allow-Methods: GET, PUT, POST, DELETE, OPTIONS');
        header('Access-Control-Max-Age: 86400');
        header('Access-Control-Allow-Headers: X-API-KEY, Origin, X-Requested-With, Content-Type, Accept, Access-Control-Request-Method,Access-Control-Request-Headers, Authorization');
        if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') exit;
        return $next($request);
    }

我已经设置了 CORS 的所有标头。当 React 向 PHP API 发出请求时，不会发送 COR 标头。在chrome中查看网络信息截图：

反应网络快照

现在，如果我直接在 Web 浏览器中访问 API，我会得到 COR 标头。请参阅下面的快照：

在chrome快照中直接访问PHP API

下面是从 API 请求数据的 React 代码：

/**
     * Constructor that sets up this class.
     */
    constructor() {
        this.apiBaseUrl = process.env.REACT_APP_API_BASE_URL;
        console.log(process.env);
        this.client = axios.create({
            baseURL: this.apiBaseUrl,
            headers: {
                'Content-Type': 'application/json',
            },
            withCredentials: true
        });
    }

    /**
     * Gets data from the API.
     * @param {string} endpoint the API endpoint
     */
    getData(endpoint) {
        return this.client.get(endpoint)
            .then(response => response.data)
            .catch(error => this.handleError(error));
    }

当 React 向 PHP API 发出请求时，如何获取要发送的 COR 标头？我很少在这里问问题，但我似乎一生都无法弄清楚。

我尝试直接通过 PHP 将 CORS 标头添加到 .htaccess 文件（apache 配置文件）中。之后我希望 COR 标头问题能够得到解决。

Answer 1

来自客户端的 GET 请求并不总是需要 Access-Control-Allow-Credentials 标头。仅在某些特定情况下才需要此标头：

当您使用凭据（例如 cookie、HTTP 身份验证或 TLS 客户端证书）发出请求时：在这种情况下，您需要确保服务器还包含 Access-Control-Allow-Credentials: true 标头。 此外，Access-Control-Allow-Origin 标头不能有星号 (*)；它必须是一个特定的起源。

对于简单的非凭据请求：您不需要 Access-Control-Allow-Credentials 标头。 只需确保服务器允许通过 Access-Control-Allow-Origin 标头发送请求即可。

访问控制允许凭据