angular http post, error data is null

Question

I am trying send post data to a server script mail.php with my ionic app. But the 'data' argument in the function handleError is null...

Can you help me fix this?

Can it be a Content Security Protocol issue? Because I am not sure what to use here... I need to communicate with boardlineapp.com and use FB and Google Single Sign In.

controllers.js:

  sendToServer.f(data).success(handleSuccess).error(handleError);
  function handleSuccess(data , textStatus, jqXHR ) {
      console.log("Message successfully sent");
      $("#mypanel").panel( "close" );
  }
  function handleError(data , textStatus, jqXHR  ) {
      console.log("Error when sending the message : ");
      console.log(data);
      console.log(data.response);
      console.log(textStatus);
      console.log(jqXHR);
      alert("The message could not be sent. Sorry for the inconvenience.");
  };

services.js:

.service('sendToServer', function sendToServerFactory($http) {  
    this.f = function(dataToSend) {
        return $http({
            url: 'http://id:password@boardlineapp.com/app/mail.php',
            method: "POST",
            data: dataToSend
        });
    }
})

mail.php:

<?php
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: GET, POST");
header("Access-Control-Allow-Headers: *");
if($_POST) {
    $userEmail=$_POST['userEmail'];
    $subject=$_POST['subject'];
    $destEmail=$_POST['destEmail'];
    $body=$_POST['body'];

    mail($destEmail, $subject, $body, "From:" . $userEmail);
#this bit doesn't work
#   $response = mail($destEmail, $subject, $body, "From:" . $userEmail);
#   echo $response;
#   exit();
}
?>

Console error:

error    TypeError: Cannot read property 'response' of null
    at handleError (http://192.168.0.11:8100/js/services.js:201:27)


XMLHttpRequest cannot load http://boardlineapp.com/app/mail.php.
Response to preflight request doesn't pass access control check: The 
'Access-Control-Allow-Origin' header contains multiple values '*, *', 
but only one is allowed. Origin 'http://192.168.0.11:8100' is 
therefore not allowed access.

config.xml:

<access origin="*"/>
<allow-navigation href="*"/>
<allow-intent href="*"/>

It actually looks like this is a cross-site origin security (CORS) issue, try configuring your server for proper CORS headers as that should fix this or at least uncover the next issue. — Paul Ryan, Nov 26 '15 at 17:08
@PaulRyan I removed this line `header("Access-Control-Allow-Origin: *");` in mail.php, it seems to work now. Can you please explain to me how to 'configure my server for proper CORS` because I don't know how to do this. Sorry, I am newbie to this. — Louis, Nov 26 '15 at 17:14
Glad that worked, the thing to keep in mind here is that your allowing or disallowing scripts from multiple origins (boardlineapp.com and 192.168.0.11:8100) to access content on server. This is by default not allowed. By enabling CORS for * your saying you don't care about this aspect of security. This is ok for dev but probably not for production. You'll have to look up the specifics of your server for the how to configure properly (e.g. apache, nginx, IIS, etc). Decent answer on implications at http://stackoverflow.com/q/19322973. — Paul Ryan, Nov 26 '15 at 17:25

score 1 · Accepted Answer · answered Nov 26 '15 at 17:33

The TypeError is a red-herring in this the real error that's causing an issue for you is the Access-Control-Allow-Origin issue. This is pointing to a mis-configuration for server of '*, *', you can't duplicate the same origin so you'll have to update your configuration (this is dependent on the type of server, e.g. nginx, apache, IIS, etc).

Next it's a good idea to understand what setting the origin policy is doing. This is saying where you're allowing access to your server script through in this case your trying to load two different origins boardlineapp.com and 192.168.0.11:8100 which is why I'd assume you enabled * in the first place. This is a great work around for your development server where security may not be a big concern but you'll want to be much more specific in production.

The question and answers at stackoverflow.com/q/19322973 go into good detail about the security implications of this problem.

angular http post, error data is null

1 Answers1