将 Postman 代码集成到网页中。 Javascript获取客户端，php服务器端答案

【问题标题】：Integrate Postman code into webpage. Javascript fetch client side, php server side将 Postman 代码集成到网页中。 Javascript获取客户端，php服务器端
【发布时间】：2021-03-31 06:15:24
【问题描述】：

我已经构建了一个后端，它使用 PHP 和 MySQLi 从数据库中插入和读取内容。我已将 PHP 设置为 REST API 端点，并且可以使用 Postman 正确获取和发布。我正在尝试创建一个客户端端点来发送 API 请求，但无法弄清楚如何将 Postman 中的代码正确集成到客户端。

这是从数据库获取的服务器端端点：

    <?php
    include_once('config.php');
    $task = isset($_GET['task']) ? mysqli_real_escape_string($conn, $_GET['task']) :  "";
    $sql = "SELECT * FROM `my_to_do_db`.`my_to_do_tb` WHERE task='{$task}';";
    
    $get_data_query = mysqli_query($conn, $sql) or die(mysqli_error($conn));
        if(mysqli_num_rows($get_data_query)!=0){
        $result = array();
        
        while($r = mysqli_fetch_array($get_data_query)){
            extract($r);
            $result[] = array("Task" => $task, "Date" => $date, 'Priority' => $priority);
        }
        $json = array("status" => 1, "info" => $result);
    }
    else{
        $json = array("status" => 0, "error" => "To-Do not found!");
    }
    @mysqli_close($conn);
    // Set Content-type to JSON
    header('Content-type: application/json');
    echo json_encode($json);

当我使用 Postman GET 时，它可以正常工作。这是我单击“代码”（Javascript 获取）时 Postman 导出的代码：

    var urlencoded = new URLSearchParams();

    var requestOptions = {
        method: 'GET',
        body: urlencoded,
        redirect: 'follow'
    };

    fetch("http://localhost/endPointTest/info.php?task=Build API CRUD app", requestOptions)
    .then(response => response.text())
    .then(result => console.log(result))
    .catch(error => console.log('error', error));

这是我一直在尝试将其集成到客户端页面的方式：

    <!DOCTYPE html>
    <html>
     <head>
      <title>Get Info API client side</title>
     </head>
     <body>
        <h3 class="displayData"></h3>
        <button type="submit" id="getData">Submit</button>
    
     <script type="text/javascript">
        const displayData = document.querySelector('.displayData')

        document.getElementById('getData').addEventListener
        ('click', getData);

        var urlencoded = new URLSearchParams();

        var requestOptions = {
          method: 'GET',
          body: urlencoded,
          redirect: 'follow'
        };

        function getData(){
            fetch("http://localhost/endPointTest/info.php?task=Do some stuff", requestOptions)
            .then(response => {
                return response.json()
            })
            .then(data => {
                console.log(data)
                displayData.innerHTML = data
            })
        }
    </script> 
    </body>
    </html>

我的问题基本上是：如何将 Postman 的代码集成到现实世界的页面中？

【问题讨论】：

标签： javascript php api fetch postman

【解决方案1】：

事实证明，问题在于 Postman 用于测试并且不像浏览器那样工作。 CORS 不是 Postman 的问题，但它是浏览器的问题，在我将所需的标头添加到 PHP 页面后，API 能够连接。

【讨论】：