AngularJS向服务器发出发布请求。 如何使用HTTP.POST在angularjs中添加键和值。 （错误：（POST http：// IP / URL / 403（禁止）））

Question

I am beginner programming with Angularjs and I want to make post request to my server. On the server side I'am waiting data with key value pair. I would like to know how to add the key and value in the HTTP.post.

Additional info: XAMP & Using CodeIgniter for the API.

---

This is what I have for the controller.

// calling our submit function.
    $scope.submitForm = function() {
    // Posting data to php file
        var data = ({
            'username': $scope.username,
            'password': $scope.password,
            'email': $scope.email,
            'fName': $scope.firstName,
            'lName': $scope.lastName,
            'gender': $scope.gender
        });

        var config = {
            headers : {
                'Content-Type': 'application/x-www-form-urlencoded'
            }
        }

        $http.post('http://IP/URL/ ', data, config)
        .success(function (data, status, headers, config) {
            $scope.PostDataResponse = data;
        })
        .error(function (data, status, header, config) {
            $scope.ResponseDetails = "Data: " + data +
                "<hr />status: " + status +
                "<hr />headers: " + header +
                "<hr />config: " + config;
        });
    };

When I submit the data, this is what I get.

CONSOLE ERROR : http://i.stack.imgur.com/Qh8Ci.jpg

Network Preview information : " http://i.stack.imgur.com/oKtM4.jpg

Answer 1

The solution to my problem was

1) Modify the code to this

function ($scope, $http, $stateParams, $httpParamSerializerJQLike) {

$scope.data = {}
  // calling our submit function.
    $scope.submitForm = function() {
    // Posting data to php file


      $http({
    url: url,
    method: 'POST',
    data: $httpParamSerializerJQLike($scope.data),//
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded',
        'X-API-KEY' : '123456'
    }
  }) .success(function (data, status, headers, config) {
            $scope.PostDataResponse = data;
        })
        .error(function (data, status, header, config) {
            $scope.ResponseDetails = "Data: " + data +
                "<hr />status: " + status +
                "<hr />headers: " + header +
                "<hr />config: " + config;
        });
    };

I modified the above code, thanks to this link/post that Mike provided to me. ( How do I POST urlencoded form data with $http in AngularJS? )

2) I Change the headers to this

headers: { 'Content-Type': 'application/x-www-form-urlencoded', 'X-API-KEY' : 'PASSWORD' })

3) Implement this to the rest_controller in the API (Server side)

header('Access-Control-Allow-Origin: *');
header("Access-Control-Allow-Headers: X-API-KEY, Origin, X-Requested-With,   
Content-Type, Accept, Access-Control-Request-Method");
header("Access-Control-Allow-Methods: GET, POST, OPTIONS, PUT, DELETE");
$method = $_SERVER['REQUEST_METHOD'];
if($method == "OPTIONS") {
die();
}