React ES6 App-本地API調用

Question

我一輩子都無法弄清楚這一點，似乎應該是直截了當的，但這只是沒有點擊。

我有一個使用create-react-app創建的ES6應用程序。 我已經為項目設置了所有模板和布局，然后嘗試從我想放在應用程序內的API提取數據-就像一個裝滿MVC的MVC，其中React處理視圖，然后運行模型和控制器在PHP中。

因此，我想在其中一個組件中獲取一個函數以獲取一些數據。 我使用fetch（）函數（我知道這與許多瀏覽器尚不兼容，但這又是一天的問題）來獲取從組件到要加載的模型的相對路徑，但是fetch函數會處理我的路徑作為對基本URL的調用，后跟請求。 因此，使用在localhost：3000上運行的站點，我在getData（）函數中運行以下代碼...

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

...提取的網址便是http：// localhost：3000 / models / overall-stats.php ，它可以簡單地解析回index.html文件並加載應用程序，而不是我請求的PHP文件。

如果我需要點擊該PHP文件來獲取數據，那么使用fetch是否會出錯？ 還是我使用不正確？ 如果我不應該使用訪存，有什么更好的方法來解決這個問題呢？

當我在apache服務器上運行此文件（在構建和部署之后）時，我可以使提取工作正常（apache可以識別URL的結構並按預期的方式命中它），並且我沒有遇到任何問題，但是我需要能夠在本地開發環境中工作並具有相同的功能。 該應用程序最終將實時部署在apache服務器上。

任何幫助將不勝感激。

Answer 1

我睡着之后就知道這將是非常簡單的……我只需要將我的模型和控制器移動到公共目錄中就可以訪問它們。 我將對模型進行身份驗證，以使它們不能直接被命中，而只能通過GET請求被命中。

Answer 2

您為什么不只使用${baseUrl}/models/... ？

同樣，為了解決瀏覽器獲取問題，您可以導入Polyfill或直接使用axios（我的選擇）！

Answer 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: *');