Fetch API не может загрузить локальный файл .php - React JS + PHP - PullRequest
Новая
       14

Fetch API не может загрузить локальный файл .php - React JS + PHP

2 голосов
/ 27 сентября 2019

Я работаю над приложением React JS.Где я использую PHP и MySQL на серверной части и React JS на серверной части.Я пытаюсь сделать простой вызов API «fetch ()» для внутреннего интерфейса и получить некоторые данные.Мое приложение React работает на "http://localhost:3000/".. Я создал папку с именем" api / index.php "в корневом каталоге приложения React. Когда я пытаюсь сделать вызов, я получаю сообщение об ошибке" Файл не найден: 404 ". Я не знаю почему.

Выбор API в компоненте 

fetch("/api/index.php", {
  method: "POST",
  headers: {
    'Content-Type': 'application/json'
  }
}).then(res => console.log(res))

Структура файлов enter image description here

Обратите внимание, что я запускаю все приложениев wamp каталоге сервера www/react-app/

Ответы [ 2 ]

3 голосов
/ 27 сентября 2019

Прежде всего, ваш файл находится за пределами каталога public, поэтому он недоступен с вашего веб-сервера разработки.Кроме того, похоже, что вы смешиваете понятия здесь.Помните о некоторых вещах:

  1. Реагирующее приложение создается из вашего исходного кода и обычно используется при разработке с помощью какого-либо веб-сервера разработки.
  2. Файлы PHP необходимо анализировать на стороне сервера,обычно как расширение apache или nginx.
  3. Если вы попытаетесь обслужить свой файл без парсера PHP, вы откроете свой исходный код всему миру вместо того, чтобы его выполнять.
1 голос
/ 27 сентября 2019

Вы не можете обслуживать php с create-react-app сервером разработки (т.е. npm run start).Как указал @EliasSoares, ваш PHP должен быть проанализирован на стороне сервера с помощью php-fpm или установки Apache mod_php.

Либо вам нужно:

  • Построитьсоздать-реагировать-приложение статически (то есть npm run build).Затем вручную скопируйте результат сборки вместе с вашим /api PHP-кодом в корневой каталог документа WAMP.Этот способ работает, но вам нужно будет копировать папку JS / assets в WAMP при каждом обновлении кода ReactJS.

    или

  • Служить PHP с WAMP надругой локальный порт (скажем, locahost:8080).Продолжайте разрабатывать приложение CRA на сервере разработки (например, npm run start) одновременно.Вам нужно изменить URL-адрес получения следующим образом: 

    fetch('http://localhost:8080/api/index.php', options).then(...);

    Таким образом, вам нужно правильно кодировать свой PHP, чтобы иметь дело с предварительным запросом CORS и заголовком .Если вы используете какой-то популярный PHP-фреймворк, я уверен, что у них будет какое-то промежуточное программное обеспечение / плагин для решения этой проблемы.

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

...