Как получить данные с сервера, используя JavaScript? (добавление бэкенда в приложение React в первый раз)

Question

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

Мой общий план состоял в том, чтобы загрузить XAMPP, написать код PHP, который запрашивает базу данных SQL, а затем извлечь данные с сервера, извлекая данные со страницы PHP. Я создал новое приложение реакции с помощью npx create-реагировать-приложение и запустил сервер Apache на XAMPP.

Внутри функции componentDidMount () страницы React я попытался:

fetch("http://localhost/test/", {mode: 'no-cors'})
.then(response => {
    console.log(response);
})

Но тело ответа пусто. Я полагаю, что это потому, что «no-cors» приводит к непрозрачному ответу, поскольку вы не должны извлекать ресурсы из разных источников.

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

fetch("http://localhost/test/", {mode: 'no-cors'})
.then(response => response.json())
.then(json => {
    console.log(json)
})

Когда я пытаюсь это сделать, я получаю сообщение об ошибке «Unhandled Rejection (SyntaxError): неожиданный конец ввода»

Внутри моего test.php в папке XAMPP у меня есть:

header('Access-Control-Allow-Origin: *');
header('Content-type: application/json');
<?php
  $myObj = new stdClass();
  $myObj->name = "John";
  $myObj->age = 30;
  $myObj->city = "New York";

  $myJSON = json_encode($myObj);

  echo $myJSON;
?>

Я также попытался повторить "Hello world". На данный момент меня не интересует формат или содержание данных, которые я пытаюсь передать; Я просто хочу передать данные из PHP в JavaScript.

Полагаю, проблема в том, что все размещается локально? Я получаю доступ к своему приложению React для тестирования на localhost: 3000, а страницу php можно открыть на localhost / test /. В основном я работаю над этим проектом ради собственного обучения и для того, чтобы получить некоторый опыт работы с бэкендом, когда я ищу свою первую работу после окончания учебного заведения, поэтому мне все равно, будет ли она размещена в Интернете или нет.

Если кто-нибудь может помочь мне понять, как заставить это работать или каков лучший путь вперед, я был бы очень признателен! Является ли использование XAMPP / PHP даже правильным подходом здесь? Надеюсь, этот вопрос имеет смысл ...

edit: Спасибо за предложение. Я попытался изменить URL в своем коде реакции на http://127.0.0.1/test/. Однако у меня был идентичный результат. Есть ли что-то в конфигурации сервера, что я должен изменить?

Answer 1

Мне удалось заставить мой код работать. Одна большая проблема заключалась в том, что я поместил свой php-заголовок за пределы php-тегов. Я также должен был на самом деле вернуть response.json () в первый .then. Здесь был задан очень похожий вопрос: Запрос не выполнен из-за проблемы CORS с источником из localhost

Мой рабочий код выглядит следующим образом:

<?php
  header("Access-Control-Allow-Origin: *");
  header("Access-Control-Allow-Methods: *");

  $myObj = new stdClass();
  $myObj->name = "John";
  $myObj->age = 30;
  $myObj->city = "New York";

  $myJSON = json_encode($myObj);

  echo $myJSON;
?>

И JavaScript:

componentDidMount() {
    fetch("http://localhost/test/")
    .then(response => {
        return response.json();
    }).then(data => {
        console.log(data);
    });
}

Объект JSON, содержащий имя, возраст и местоположение города, успешно зарегистрирован на консоли. Извините за глупый вопрос, но я все же ценю помощь.