CODEWITHSUNDEEP
phpangularjsapachecors
Javacadabra
Javacadabra

Reputation: 5758

AngularJS application communcation with PHP file on XAMP Localhost

I've had this problem for over a day now and I'm at my wits end regarding it! Firstly, I've never worked with AngularJS before and whilst I can see the benefits there is a huge learning curve. I'm trying to send a request from my Angular application out to a php file using $httpd.post() but every time I do it I get the below error in my console:

XMLHttpRequest cannot load http://localhost/angular-service/index.php. Request header field Access-Control-Allow-Origin is not allowed by Access-Control-Allow-Headers in preflight response.

Let me go into more detail.

Angular Application is running on Gulp server and the PHP file is hosted on XAMP localhost. Gulp is running port 8080 and XAMP on port 80.

I attempted to configure XAMP to enable CORS Headers by going to the httpd.conf file and adding the following at the very bottom:

<Directory />
    Header set Access-Control-Allow-Origin "*"
    Header set Access-Control-Allow-Headers "Content-Type"
    Header set Access-Control-Allow-Methods "GET, PUT, OPTIONS, DELETE, POST"
</Directory>

This unfortunately didn't make any impact.

The block of code in my angular application which is making the request is here:

 $scope.getSomething = function () {       
     $http({
          method: "POST",
          url: "http://localhost/angular-service/index.php",
          data: "",
          headers: {'Content-Type': 'application/x-www-form-urlencoded'}
        }).
        success(function(response) {
            if(response==1){
               console.log(response);
            }
        }).
        error(function(response){
            console.log(response);
        });
    }

The PHP file is here:

$postdata = file_get_contents("php://input");
$request = json_decode($postdata);
echo "I'm a PHP File";

Can anyone please point me into the right direction as to what I need to do to resolve this. It's incredibly frustrating!

Upvotes: 1

Views: 490

Answers (2)

Sagar Guhe
Sagar Guhe

Reputation: 1106

Try adding this to your .htaccess:

Header set Access-Control-Allow-Origin "*"

This helped when I was getting same issue with PHP and Angularjs..

Upvotes: 0

Matheno
Matheno

Reputation: 4142

I suggest you to add the request methods in your PHP file also. Here is an example:

<?php
   header("Access-Control-Allow-Origin: http://yourdomain");

   /* Allowed request method */
   header("Access-Control-Allow-Methods: PUT");

   /* Allowed custom header */
   header("Access-Control-Allow-Headers: Content-Type");

   /* Age set to 1 day to improve speed caching */
   header("Access-Control-Max-Age: 86400");

   /* Options request exits before the page is completely loaded */ 
   if (strtolower($_SERVER['REQUEST_METHOD']) == 'options') 
   {
      exit();
   }

   /* Response data */ 
   $arr = array("user_name" => "tizen", "phone_number" => "12312334234");   

   /* Response data returned in JSON format */
   echo json_encode($arr);
?>

More info about the CORS protocol is found here

Upvotes: 1

Related Questions