gruberb gruberb - 1 year ago 210
JSON Question

Angular $http is sending OPTIONS instead of PUT/POST

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

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

My request payload is send as an object:

enter image description here

How do I set my header properly?


The PHP backend sets some headers:

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

->addHeaderLine('Access-Control-Allow-Origin', '*');

Is there something missing?

Answer Source

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.

Putting this inside the .htaccess file

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download