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

Posted 2023-02-27

【中文标题】Fetch API 无法加载“.php”本地文件 - React JS + PHP

【英文标题】：Fetch API can't load '.php' local file - React JS + PHP

【发布时间】：2020-01-27 12:18:15

【问题描述】：

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

在组件中获取 API

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

文件结构

请注意，我在wamp 服务器目录www/react-app/ 中运行整个应用程序

【问题讨论】：

你不认为你需要在 React Js /api/index.php 中给出这样的路径

你是如何开始你的 React 应用程序的？

@KoalaYeung 使用“create-react-app”

@Jaymin 是的，我打错了代码，我现在更新了。

你是如何运行你的 php/MySQL 后端的？您是否有另一个 apache 在不同的端口上运行并通过该端口提供服务？如果是这种情况，那么您的 URL 将是 localhost:apache-port/api/index.php

【参考方案1】：

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

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

【讨论】：

我明白你的意思，但是如果我构建 React 应用程序，那么我也应该单独托管 .php 代码？

是的。这是最佳实践，为您的 api 创建一个全新的应用程序。

将我的答案更新为更全面的版本。

我的 PHP 代码已经在 Wamp 上，我在 WAMP 中为整个 react 应用程序提供服务。

【参考方案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 preflight request and header。 如果你使用一些流行的 PHP 框架，我相信他们会有一些中间件 /插件解决这个问题。

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

【讨论】：

@NadeemAhmad：您的fetch 调用未指定主机名和端口。在这种情况下，您的浏览器会假定该路径位于同一主机：端口（即http://localhost:3000）上，这是无法解析和运行 PHP 代码的 CRA 开发服务器。

如果您只是将fetch URL 更改为您的 WAMP 端口，您很可能会遇到我提到的 CORS 问题。

是的，我会处理的。