React ES6 App - 本地 API 调用答案

【问题标题】：React ES6 App - Local API callsReact ES6 App - 本地 API 调用
【发布时间】：2018-07-31 23:06:30
【问题描述】：

我这辈子都想不通，它似乎应该是直截了当的，但它只是没有点击。

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

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

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

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

如果我需要点击那个 PHP 文件来获取我的数据，我在使用 fetch 时错了吗？还是我只是使用不正确？如果我不应该使用 fetch 我遇到的这个问题有什么更好的方法？

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

任何帮助将不胜感激。

【问题讨论】：

您的文件夹结构是什么样的？模型文件夹在您的公用文件夹旁边吗？
不，它是我的 src 目录的子文件夹。应该升级吗？

标签： javascript php reactjs apache es6-promise

【解决方案1】：

我知道在这上面睡觉之后会非常简单......我只需将我的模型和控制器移动到公共目录中即可访问它们。我将对模型进行身份验证，这样它们就不能被直接命中，而只能通过 GET 请求。

【讨论】：

【解决方案2】：

你为什么不直接使用 ${baseUrl}/models/... 之类的东西？

另外，为了解决浏览器的 fetch 问题，您可以导入 Polyfill 或简单地使用 axios（我的选择）！

【讨论】：

基本 URL 在那里很好，但我需要我的 URL 来完全解析。我试图避免使用路由器，因为该应用程序是一个非常简单的单页仪表板，只显示数据——我不想让它过于复杂。我会检查 axios 看看它是否会做我所追求的，谢谢。
酷，无论如何我认为从其他文件中导入常量将有助于使您的文件保持清晰和更具可读性

【解决方案3】：

也许你可以尝试使用 ajax 从服务器获取或发布数据，就像这样：

 $.ajax({
        url: '../models/overall-stats.php',
        data: {

        },
        type: 'GET',
        dataType : 'json',
        success : function(res){
           let obj = parseJSON(res)
        }

    })

或将其添加到您的 php 文件的顶部，因为 CORS：

header('Access-Control-Allow-Origin: *');

【讨论】：

我并不想包含 jQuery，但它可能是一个简单的解决方案。到办公室我会试试 cors 方法，谢谢