javascript - Angular $http is sending OPTIONS instead of PUT/POST

Question

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:

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:

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?

Answer 1

Ok, I've solved it.

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

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.