angularJs POST data in $_POST for php

Question

I am doing a post request to a php script form my AngularJS app. I have gotten it working by looking up answers online but I would like to get the data in my php script in the $_POST['jwt'] variable.

Here is my AngularJS code:

var dataReq = {
method: 'POST',
url: 'http://localhost/PHP/dataSender.php',
headers: {
 'Content-Type': 'application/x-www-form-urlencoded'
 },
 data: { jwt: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9' }
}
$http(dataReq).success(function(response,data) {
  console.log(response);
});

In my PHP I have this :

$postdata = file_get_contents("php://input");
$request = json_decode($postdata);
@$jwt = $request->jwt;
echo $jwt;

And it is working but if I change the header in my angular request to

'Content-Type': 'application/json'

I get the CORS error.

Is there a way I can get the values in $_POST variable because I have never worked with this file_get_contents("php://input");

How can I check for the values is set or not in $_POST I would do something like this:

if(isset($_POST["jwt"]) && !empty($_POST["jwt"]))
 {
  echo $_POST["jwt"];
  }

How can I do the same test in this file_get_contents("php://input");

Answer 1

Add a angular js factory with transform form request method.

 'use strict';
          // I provide a request-transformation method that is used to prepare the outgoing
     // request as a FORM post instead of a JSON packet.
     angularApp.factory(
     "transformRequestAsFormPost",
     function() {

     // I prepare the request data for the form post.
     function transformRequest( data, getHeaders ) {

     var headers = getHeaders();

     headers[ "Content-type" ] = "application/x-www-form-urlencoded; charset=utf-8";

     return( serializeData( data ) );

     }


     // Return the factory value.
     return( transformRequest );


     // ---
     // PRVIATE METHODS.
     // ---


     // I serialize the given Object into a key-value pair string. This
     // method expects an object and will default to the toString() method.
     // --
     // NOTE: This is an atered version of the jQuery.param() method which
     // will serialize a data collection for Form posting.
     // --
     // https://github.com/jquery/jquery/blob/master/src/serialize.js#L45
     function serializeData( data ) {

     // If this is not an object, defer to native stringification.
     if ( ! angular.isObject( data ) ) {

     return( ( data == null ) ? "" : data.toString() );

     }

     var buffer = [];

     // Serialize each key in the object.
     for ( var name in data ) {

     if ( ! data.hasOwnProperty( name ) ) {

     continue;

     }

     var value = data[ name ];

     buffer.push(
     encodeURIComponent( name ) +
     "=" +
     encodeURIComponent( ( value == null ) ? "" : value )
     );

     }

     // Serialize the buffer and clean it up for transportation.
     var source = buffer
     .join( "&" )
     .replace( /%20/g, "+" )
     ;

     return( source );

     }

     }
     );


     // -------------------------------------------------- //
     // -------------------------------------------------- //


     // I override the "expected" $sanitize service to simply allow the HTML to be
     // output for the current demo.
     // --
     // NOTE: Do not use this version in production!! This is for development only.
     angularApp.value(
     "$sanitize",
     function( html ) {

     return( html );

     }
     );

Add form save controller and use a transform form request and header in controller file.

 angularApp.controller('saveFormCtrl', function($scope, $http, transformRequestAsFormPost) {   
     $http({
                                transformRequest: transformRequestAsFormPost,
                                method : 'POST',
                                url : 'save.php',
                                data: {
                                    jwt: $scope.jwt,
                                },
                                headers: {
                                 'Content-Type': 'application/x-www-form-urlencoded',
                                 }
                        }).success(function(res){
        }
    });