Angular $ http sends OPTIONS instead of PUT / POST

Question

I am trying to update / insert data into a MySQL database through a PHP server. I create Front End using AngularJS and use the $http service to communicate with the REST API.

My setup looks like this:

I set the header through $ 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 Chrome dev console shows me this:

When I switch from POST to PUT, I send an OPTIONS call instead of PUT. And the content type only switches to content-type .

My request payload is sent as an object:

How to set the title correctly?

---

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 something missing?

Answer 1

Ok, I decided.

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

What he does is:

• Checking which request will be made
• If it is POST, PUT or DELETE
• First, it sends an OPTION request to check if the domain from which the request was sent matches the server.
• If not , he wants Access-Header to allow this request

Important: the OPTIONS request does not send credentials .

Thus, my server server denied the PUT request.

Decision:
Put this in your .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 that, create an empty .php file called blank.php inside the public folder.

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

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

To clarify:

• I already sent the header Access-Control-Header
• It was decided the first two lines, and
• Access-Control-Allow-Origin from a specific subdomain with a port

The best website you can find in learning more about CORS .

Answer 2

You do not need to specify the $http headers manually, all this is done for you behind the scenes, and they are automatically installed in application/json for POST and PUT requests. So all you have to do is

 $http.post(url, data); $http.put(url, data);