javascript - React ES6 App - 本地 API 调用

Question

我一生都无法弄清楚这一点，看起来它应该是直截了当的，但它只是没有点击。

我有一个使用 create-react-app 创建的 ES6 应用程序。我已经为该项目设置了所有模板和布局，并尝试从我想要放在应用程序内部的 API 中提取数据 - 就像一个拙劣的 MVC，其中 React 处理 View ，我运行模型和 Controller 在 PHP 中。

所以我的一个组件中有一个函数，我想获取一些数据。我使用 fetch() 函数(我知道这与许多浏览器尚不兼容，但这是另一天的问题)来获取从组件到我想要加载的模型的相对路径，但是 fetch 函数处理我的路径是对基本 URL 的调用，后跟请求。因此，当站点在 localhost:3000 上运行时，我在 getData() 函数中运行以下代码...

let test = fetch('../models/overall-stats.php').then(function(response) {
        console.log(response);
        return response;
    });

... fetch 命中的 URL 是 http://localhost:3000/models/overall-stats.php它只是解析回 index.html 文件并加载应用程序，而不是我请求的 PHP 文件。

如果我需要点击该 PHP 文件来获取我的数据，我使用 fetch 是否错误？或者我只是错误地使用它？如果我不应该使用 fetch，那么解决我遇到的这个问题的更好方法是什么？

当我在 apache 服务器上运行它时(构建和部署之后)，我可以让提取工作正常(apache 识别 URL 的结构并按照我的预期命中它)并且我命中文件没有问题，但是我需要能够在本地开发环境中工作并具有相同的功能。该应用程序最终将部署在 Apache 服务器上。

任何帮助将不胜感激。

Answer 1

我知道在睡了这个之后，这将非常简单......我只需将我的模型和 Controller 移动到公共(public)目录中，以便可以访问它们。我将对模型进行身份验证，这样它们就不能被直接访问，而只能通过 GET 请求访问。