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 communic

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.

Answer 2

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);