Angularjs making post request to server. How to add key and value in angularjs using HTTP.POST. (ERROR : (POST http://IP/URL/ 403 (Forbidden)))

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 : https://i.stack.imgur.com/Qh8Ci.jpg

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

Check out this post. It should solve your problem: http://stackoverflow.com/questions/24710503/how-do-i-post-urlencoded-form-data-with-http-in-angularjs — Mike, Aug 29 '16 at 01:02
Ok, I found out that the problem is caused by CORS, I'm using the chrome plugin "Access-Control-Allow-Origin" and it didn't help. So I uploaded the Application I am working with to the phone and it worked. And I also modify the http headers like this ( headers: { 'Content-Type': 'application/x-www-form-urlencoded', 'X-API-KEY' : 'PASSWORD' }) — Christian J Morales, Aug 29 '16 at 05:22
Since CORS is only an issue when running your app in development mode with ionic serve, and not when running as a mobile app packaged with Cordova, a simpler option is to just disable CORS altogether for local development. — Christian J Morales, Aug 29 '16 at 05:26

score 0 · Accepted Answer · edited May 23 '17 at 11:51

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();
}

Angularjs making post request to server. How to add key and value in angularjs using HTTP.POST. (ERROR : (POST http://IP/URL/ 403 (Forbidden)))

1 Answers1