Fetch API 无法加载 '.php' 本地文件 - React JS + PHP

Question

我正在开发 React JS 应用程序。我在后端使用 PHP 和 MySQL，在前端使用 React JS。我想要做的是对后端进行简单的 API 'fetch()' 调用并获取一些数据。我的 React App 在“http://localhost:3000/”上是运行。我在 React 应用程序的根目录中创建了一个名为 "api/index.php" 的文件夹。当我尝试拨打电话时，出现错误 "File not found : 404"。不知道为什么。

在组件中获取 API

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

文件结构

Please note that I am running the whole app in wamp server directory www/react-app/

Answer 1

首先，您的文件位于 public 目录之外，因此无法从您的开发网络服务器访问它。另外，看起来你在这里混合概念。记住一些事情：

React 应用程序是根据您的源代码构建的，通常在开发时使用一些开发网络服务器提供服务。
PHP 文件需要在服务器端解析，通常作为apache或nginx的扩展。
如果您尝试在没有 PHP 解析器的情况下提供您的文件，您将向世界公开您的源代码而不是执行它。

Answer 2

您无法使用 create-react-app 开发服务器（即 npm run start）为 php 提供服务。正如@EliasSoares 指出的那样，您的 PHP 需要在服务器端通过 php-fpm 或 Apache 的 mod_php 设置进行解析。

你应该：

静态构建 create-react-app（即 npm run build）。然后手动将构建结果连同您的 /api PHP 代码复制到 WAMP 文档根目录。这种方式可行，但每次更新 ReactJS 代码时，您都需要将 JS / assets 文件夹复制到 WAMP。

或
在不同的本地主机端口（例如 locahost:8080）上使用 WAMP 服务 PHP。仍然同时使用开发服务器（即 npm run start）开发您的 CRA 应用程序。您需要像这样修改您的提取 URL：
```
fetch('http://localhost:8080/api/index.php', options).then(...);
```
这样，您需要正确编码 PHP 以处理 CORS 预检请求和 header。如果您使用一些流行的 PHP 框架，我相信他们会有一些中间件 / 这个问题的插件解决方案。

我认为第二个选项虽然设置起来比较麻烦，但它是更灵活的解决方案，可以提供更好的开发体验。

Fetch API 无法加载 '.php' 本地文件 - React JS + PHP

Fetch API can't load '.php' local file - React JS + PHP

php

reactjs

fetch

fetch-api