Реакция. js + PHP / Apache: Access-Control-Allow-Headers не разрешает тип содержимого поля заголовка запроса в ответе перед полетом

Question

Я хочу создать страницу контактов в React. js. После нажатия кнопки отправки открывается страница PHP (на Apache) с использованием метода fetch (с использованием POST). К сожалению, я продолжаю получать следующие ошибки (как на моем локальном хосте: 3000 / dev машина, так и на Apache сервере:

Access to fetch at 'http://example.com/dir/email.php' from origin 'http://localhost:3000' has been blocked by CORS policy: Request header field content-type is not allowed by Access-Control-Allow-Headers in preflight response.

Это функция sendEmail, которая вызвано при отправке:

  sendEmail() {
    fetch('http://example.com/dir/email.php', {
      method: 'POST',
      headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        'firstname': this.state.firstName,
        'lastname': this.state.lastName,
        'message': this.state.message
      })
    }).then(function(response) {
      console.log(response);
      return response.json();
    }).then(function (json) {
      console.log(json);
    });
  }

Мой сценарий PHP теперь выглядит следующим образом (у меня пока нет логи c):

<?php
  header('Access-Control-Allow-Origin: *');
  header('Access-Control-Allow-Methods: GET, POST');
  header("Access-Control-Allow-Headers: X-Requested-With");

  echo json_encode(array('success' => true));

Я также попытался добавить файл .htaccess со следующим содержимым, но, похоже, он тоже не работает:

<IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
    Header set Access-Control-Content-Type "*"
    Header set Access-Control-Accept "*"
    Header set Access-Control-Allow-Methods "GET, POST"
    Header set Access-Control-Allow-Headers: X-Custom-Header
</IfModule>

Я думаю, что проблема должна быть на сервере, так как все примеры, которые я нашел на fetch, выглядят как и у меня. Я искал эту проблему, но ответы, которые я нашел, не работали или предназначены для Express серверов.

Может быть, есть и другие, более эффективные способы создания такой простой формы контакта в React . js, так что я открыт для предложений. Я довольно новичок в React. js, поэтому есть большая вероятность, что я упускаю что-то очевидное ...

Любой вклад будет очень высоко ценится!

Answer 1

Перед выполнением запроса CORS (это AJAX / JSON / HTTP-запрос, имя домена которого не совпадает с доменом html), браузер отправит «предполетный запрос» с методом OPTIONS ,

Ссылка: https://developer.mozilla.org/en-US/docs/Glossary/Preflight_request

Итак, поместите это в ваш php файл:

<?php
// CORS support
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Headers: *");

// https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
if($_SERVER["REQUEST_METHOD"] == "OPTIONS") exit();
// before sending CORS request, modern browsers often make "pre-flight request" in order to see which headers are allowed/accepted from custom origin
// that request must be answered with status code 200 OK, and must contain header Acces-Control-Allow-Headers

Объяснение:

• Предварительный запрос предназначен для того, чтобы убедиться, что сервер понял, что запрос является запросом CORS.
• В «Access-Control-Allow-Header» перечислены все заголовки HTTP, которые можно использовать при следующих действиях. Запрос CORS

Более подробное объяснение можно прочитать по ссылке выше