使用角度 $http 从 php api 请求数据时出错 [重复]

Question

错误：无法加载http://localhost/APi/index.php：预检响应中的 Access-Control-Allow-Headers 不允许请求标头字段 Content-Type。

js 文件（角度）-http 请求

    $http({
         'method': 'POST',
         'url': 'http://localhost/APi/index.php',
         'data': '{"viewAllPlans":"Plans"}'
     }).then(function (response) { 
         console.log(response);
     }, function (xhr) {
                     console.log(xhr);
                 })

index.php（API 文件）

    <?php
    header("Access-Control-Allow-Origin: *");
    header("Content-Type: application/json");
    $con = new mysqli("localhost", "root", "", "database");
    if ($con->error or $con->errno) {
         echo 'Error: ' . $con->error;
    } else {
      if (isset($_POST['viewAllUsers'])) {
              $data = array();
              $data = [];
              $query = "SELECT * FROM users";
              $res0 = $con->query($query);
              while ($result0 = $res0->fetch_assoc()) {
              $data[$result0["id"]]["uid"] = $result0["id"];
              $data[$result0["id"]]["uname"] = $result0["name"];
              $data[$result0["id"]]["umobile_no"] = $result0["mobile_no"];
              $data[$result0["id"]]["uemail"] = $result0["email"];
              $data[$result0["id"]]["utype"] = $result0["type"];
              }
          echo json_encode($data);
      }
    }
    ?>

但是当我使用 ajax 请求数据时，我得到了响应，但是当我点击相应的按钮时，第二次点击时数据会显示在我的 html 页面上

ajax 代码

            $.ajax({
                'type': 'POST',
                'url': 'http://localhost/APi/index.php',
                'data':{ "viewAllUsers":"asdsa"},
                // 'data':{ "adname":"asdsa"},
                  success: function (response) {
                        console.log(response);
                        $scope.usersObj = [];
                        for (var i in response) {
                            $scope.usersObj.push(response[i]);
                        }
                        // console.log($scope.usersObj[0].email);
                },
                error: function (xhr) {
                    console.log(xhr);
                }
             }) 

html代码

    <div class="landingPlans">
              <div class="heading">
                Plans
              </div>
              <div class="detailBox">
                <div class="row actBtnBox">
                  <div class="actionBtn">
                    <button type="button" class="btn btn-info" ng-click="">Add New Plan</button>
                  </div>
                </div>
                <div class="row searchMBox">
                  <div class="searchBar">
                    <input type="text" id="inpSearch" class="form-control inpSearch" placeholder="Search Here" aria-label="Recipient's username" aria-describedby="basic-addon2" id="srhBox">
                  </div>
                </div>

                <div class="detBoxInd" ng-repeat="planVal in plansObj">
                  <div class="detBoxIndHead">
                    <span class="ds1 dss1"><i class="fa fa-user"></i>{{planVal.pname | uppercase}}</span>
                    <span class="ds2"><i class="fa fa-key"></i><span class="userIdD">{{planVal.pid}}</span></span>
                    <span class="ds3">
                      <span class="utypeBoxAd float-right">₹ {{planVal.pcost}}</span>
                    </span>
                  </div>
                  <div class="detBoxIndFoot">
                    <div class="pds1 dssf1"><i class="fa fa-globe"></i><span>{{planVal.pcircle}}</span></div>
                    <div class="pds2">{{planVal.pdesc}}</div>
                    <span class="dsf3">
                      <span class="dsf3IN">
                        <button type="button" class="btn btn-success" title="Details" ng-click='btnUsersDetail(userVal.uid,userVal.utype)' ng-if="userVal.utype=='Admin' || userVal.utype=='Dealer' || userVal.utype=='Distributor'"><i class="fa fa-angle-double-down"></i></button>
                        <button type="button" class="btn btn-warning" title="Edit" ng-click='btnUsersUpdate(userVal.uid)'><i class="fa fa-edit"></i></button>
                        <button type="button" class="btn btn-danger" title="Delete" ng-click='btnUsersDelete(userVal.uid)'><i class="fa fa-trash"></i></button>
                      </span>
                  </div>
                  <div class="usersExtraInfo">

                  </div>
                </div>
              </div>
            </div>

Answer 1

$http({
         method: 'POST',
         url: 'http://localhost/APi/index.php',
         data: {"viewAllPlans":"Plans"},
         headers : {"Content-Type":"application/json"}
     }).then(function (response) { 
         console.log(response);
     }, function (xhr) {
                     console.log(xhr);
                 })