Ответ на предполетный запрос - не видите почему? (CORS, выборка, PHP)

Question

Я нашел много дискуссий в Интернете по этому поводу, например, этот отличный принятый ответ , но все еще не могу понять, что не так. Я сделал следующее:

1. Создал приложение React с помощью create-react-app.
2. Запустил сервер с помощью npm start и вижу мое приложение в браузере.
3. Использование fetch для связи с моим локальным сервером:

    fetch("http://xxx.xxx.xxx.xxx/endpoint.php", {
      method: "post",
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        name: credentials.username,
        password: credentials.password
      })
    }).then(response => {
      console.log("fetch competed!");
    });

В моей PHP конечной точке,

<?php

    header("Access-Control-Allow-Origin: *");
    header("Access-Control-Allow-Headers: X-Requested-With, Content-Type, Origin, Cache-Control, Pragma, Authorization, Accept, Accept-Encoding");
    header("Access-Control-Allow-Methods: PUT, POST, GET, OPTIONS, DELETE");

    ...

Но тогда Chrome консольная отладка говорит:

Доступ к выборке в 'http://localhost: 3000 / конечная точка. php' из источника ' http://xxx.xxx.xxx.xxx: 3000 'заблокировано политикой CORS: Ответ на запрос предварительной проверки не проходит проверку контроля доступа: в запрошенном ресурсе отсутствует заголовок «Access-Control-Allow-Origin». Если непрозрачный ответ удовлетворяет вашим потребностям, установите режим запроса «no-cors», чтобы получить ресурс с отключенным CORS.

После некоторого чтения предварительный запрос отправляет OPTIONS сервер, который я разрешил в заголовке PHP. Я также попробовал proxies в файле package.json и перезапустил сервер, используя npm start.

Я также попытался пройти через https://cors-anywhere.herokuapp.com/, и я все еще получаю ошибку:

Доступ к выборке в 'http://xxx.xxx.xxx.xxx: 3000 / php / login. php' (перенаправлено с 'https://cors-anywhere.herokuapp.com/http: //xxx.xxx.xxx.xxx: 3000 / php / login. php ') от источника' http://xxx.xxx.xxx.xxx: 3000 'заблокировано политикой CORS: Ответ на предпечатный запрос не проходит проверку контроля доступа: Нет' Access- Заголовок Control-Allow-Origin 'присутствует в запрашиваемом ресурсе. Если непрозрачный ответ отвечает вашим потребностям, установите режим запроса «no-cors», чтобы получить ресурс с отключенным CORS.

Я также попытался заменить fetch на что-то более простое:

    fetch(url, {
      method: "POST",
      body: new URLSearchParams("email=test@example.com&password=pw")
    });

но все равно не работает.

Я не понимаю, в чем может быть проблема?

Answer 1

Для тех, кто сталкивался с подобными проблемами, мне удалось решить эту проблему, запустив отдельный сервер Apache, systemctl start apache и разместив мои конечные точки PHP в Apache root, например /var/www/html/public/. По какой-то причине сервер разработки create-react-app просто не работал, но размещение моих файлов на отдельном локальном сервере работало нормально.