angularjs and PHP : Request header field Access-Control-Allow-Origin is not allowed by Access-Control-Allow-Headers in preflight response

Question

I'm trying to do a simple POST from angularjs to a dummy php file to understand how this works. Here in my angularjs part:

<html ng-app="loginApp">
  <head>
    <meta charset="utf-8">
    <title>Login</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
      <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
    <script>
      var logindata = {username:'abc', password:'abc'}
      var loginApp = angular.module('loginApp', []);
      loginApp.controller('loginCtrl', function ($scope, $http){        
        var request = $http({
            method: "POST",
            url: "http://different-ip/a.php",                    
            data: logindata,
            headers: { 'Content-Type': 'multipart/form-data', 'Authorization': 'Basic ' + btoa(logindata.username + logindata.password), 
            'Access-Control-Allow-Origin': "*"}
        });

        request.success(
            function( data ) {
                $scope.someVariableName = data;
            }
        );
    });
    </script>
  </head>
  <body ng-controller="loginCtrl">
    <h2>Angular.js JSON Fetching Example</h2>
    <p> {{ someVariableName }} </p>
  </body>
</html>

Here is my PHP part (a.php) that resides on http://different-ip

<?php
  header("Access-Control-Request-Method: *");
  header("Access-Control-Request-Headers: *");
  header("Access-Control-Allow-Origin: *");
  file_put_contents("aa.txt", json_decode(file_get_contents('php://input'),true));
  file_put_contents("aaa.txt", getallheaders());
?>

When I execute my angularjs file, the chrome console gives me this error:

Request header field Access-Control-Allow-Origin is not allowed by Access-Control-Allow-Headers in preflight response.

When I try doing a post to this a.php using Postman, everything works fine. So why is angularjs not allowing it? I've tried to read about CORS and there is no straightforward answer to how this issue can be resolved (code wise). Can someone please help me out? Thanks in advance.

Try to check this 2 links regarding angularjs+CORS: stackoverflow.com/questions/21455045/… and stackoverflow.com/questions/27654135/… — Armen
– Armen, Commented Feb 2, 2016 at 11:20

Prarthana Hegde · Accepted Answer · 2016-02-03 10:32:35Z

8

Added this instead of current headers to my PHP file and now it works! Thanks @Armen for your help!

    if (isset($_SERVER['HTTP_ORIGIN'])) {
        header("Access-Control-Allow-Origin: {$_SERVER['HTTP_ORIGIN']}");
        header('Access-Control-Allow-Credentials: true');
        header('Access-Control-Max-Age: 86400');    // cache for 1 day
    }

    // Access-Control headers are received during OPTIONS requests
    if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {

        if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_METHOD']))
            header("Access-Control-Allow-Methods: GET, POST, OPTIONS");         

        if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']))
            header("Access-Control-Allow-Headers: {$_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']}");

        exit(0);
    }

answered Feb 3, 2016 at 10:32

Prarthana Hegde

3712 gold badges7 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Prarthana Hegde Over a year ago

Thanks @Armen.. I dug deeper with your help! :)

Armen · Accepted Answer · 2016-02-02 08:15:35Z

2

Add this 3 headers at top of a.php instead current ones with if condition

<?php
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS");
header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept, Authorization");

if($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {
   header( "HTTP/1.1 200 OK" );
   exit;
}

file_put_contents("aa.txt", json_decode(file_get_contents('php://input'),true));
file_put_contents("aaa.txt", getallheaders());
?>

You can check more about CORS here: http://www.w3.org/TR/cors/#access-control-allow-headers-response-header

Postman works because it is additional browser extension which don't cares about headers policy and don't check it before request.

edited Feb 2, 2016 at 8:15

answered Feb 2, 2016 at 7:38

Armen

4,2123 gold badges27 silver badges43 bronze badges

7 Comments

Prarthana Hegde Over a year ago

I tried this. It is still giving me the same error! :(

Armen Over a year ago

@user3193036 i updated my answer with new 3 headers, can you retry ?

Prarthana Hegde Over a year ago

Now I'm getting this : Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource

Armen Over a year ago

@user3193036 i again updated my answer this should finally help you, can you retry ?

Armen Over a year ago

@user3193036 hmm seems there is some specific issue related to your browser + server which from here i can't understand, can you include in your question screenshots from browser network tab for request and response cases ?

|

Collectives™ on Stack Overflow

angularjs and PHP : Request header field Access-Control-Allow-Origin is not allowed by Access-Control-Allow-Headers in preflight response

2 Answers 2

1 Comment

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related