62

I am trying to Update/Insert data in a MySQL database through a PHP backend. I'm building the Front End with AngularJS and using the $http service for communicating with the REST API.

My setup looks like this:

I'm setting the header via the $httpProvider:

 $httpProvider.defaults.withCredentials = true;
 $httpProvider.defaults.headers = {'Content-Type': 'application/json;charset=utf-8'};

And the POST-Call looks like this:

   return $http({
      url: url,
      method: "POST",
      data: campaign
    });

The Dev Console in Chrome shows me this:

enter image description here

When I change from POST to PUT, I'm sending an OPTIONS call instead a PUT. And the content-type switches just to content-type.

My request payload is send as an object:

enter image description here

How do I set my header properly?

EDIT:

The PHP backend sets some headers:

   $e->getResponse()
              ->getHeaders()
              ->addHeaderLine('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');

   $e->getResponse()
              ->getHeaders()
              ->addHeaderLine('Access-Control-Allow-Origin', '*');

Is there something missing?

ohboy21
  • 4,259
  • 8
  • 38
  • 66
  • application/json is a default content-type set. You need to search in your code if somewhere you are setting it to text/plain – Chandermani May 15 '15 at 07:51
  • @Chandermani My code is fairly small. I have one api.js file where I do it, and one .config.js file where I set currently the header manually. – ohboy21 May 15 '15 at 07:54
  • I agree with the consensus. Your Headers shouldn't be needed. Something very odd is going on. I look through every `http.post` I've written in Angular and they were all simple. The headers were assumed. – Dave Alperovich May 18 '15 at 07:59

2 Answers2

72

Ok, I've solved it.

What was the problem?
The CORS workflow for DELETE, PUT and POST is as follows:

enter image description here

What it does, is:

  1. Checking which request is gonna be made
  2. If it's POST, PUT or DELETE
  3. It sends first an OPTION request to check if the domain, from which the request is sent, is the same as the one from the server.
  4. If not, it wants an Access-Header to be allowed to send this request

Important here: An OPTIONS request doesn't send credentials.

So my backend server disallowed the PUT request.

Solution:
Putting this inside the .htaccess file

RewriteCond %{REQUEST_METHOD} OPTIONS
RewriteRule ^(.*)$ blank.php [QSA,L]
Header set Access-Control-Allow-Origin "http://sub.domain:3000"
Header always set Access-Control-Allow-Credentials "true"
Header always set Access-Control-Max-Age "1000"
Header always set Access-Control-Allow-Headers "X-Requested-With, Content-Type, Origin, Authorization, Accept, Client-Security-Token, Accept-Encoding"
Header always set Access-Control-Allow-Methods "POST, GET, OPTIONS, DELETE, PUT"

After this, create an empty .php file called blank.php inside the public folder.

EDIT: As one commenter pointed out, instead of creating an empty PHP file, you can add this rewrite rule to your .htaccess file\;

RewriteRule ^(.*)$ $1 [R=200,L,E=HTTP_ORIGIN:%{HTTP:ORIGIN}]]

To clarify:

  1. I already sent the Access-Control-Header
  2. What it solved was the first two lines, and
  3. Access-Control-Allow-Origin from the specific subdomain with Port

Best website I could find to learn more about CORS.

ohboy21
  • 4,259
  • 8
  • 38
  • 66
4

You don't need to specify your $http headers manually, it is all done for you behind the scenes and they are automatically set to application/json for POST and PUT type requests. So all that you should do is

$http.post(url, data);
$http.put(url, data);
Dan Moldovan
  • 3,576
  • 2
  • 13
  • 24