Backbone & Slim PHP - Access-Control-Allow-Headers - Can GET information, can't POST it?

Question

I'm using Backbone and the Slim PHP framework. I'm trying to post information to my API, however Access-Control-Allow-Headers keeps causing me problems...

My console reads:

    OPTIONS http://api.barholla.com/user/auth 405 (Method Not Allowed) zepto.min.js:2
XMLHttpRequest cannot load http://api.barholla.com/user/auth. Request header field Content-Type is not allowed by Access-Control-Allow-Headers.

My headers read:

Request URL:http://api.barholla.com/user/auth
Request Method:OPTIONS
Status Code:405 Method Not Allowed
Request Headersview source
Accept:*/*
Accept-Charset:ISO-8859-1,utf-8;q=0.7,*;q=0.3
Accept-Encoding:gzip,deflate,sdch
Accept-Language:en-US,en;q=0.8
Access-Control-Request-Headers:origin, content-type, accept
Access-Control-Request-Method:POST
Connection:keep-alive
Host:api.barholla.com
Origin:http://localhost
Referer:http://localhost/barholla/app/
User-Agent:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.4 (KHTML, like Gecko) Chrome/22.0.1229.94 Safari/537.4
Response Headersview source
Access-Control-Allow-Origin:*
Allow:POST
Connection:close
Content-Type:application/json
Date:Thu, 08 Nov 2012 16:12:32 GMT
Server:Apache
Transfer-Encoding:chunked
X-Powered-By:Slim
X-Powered-By:PleskLin

My headers in my slim index.php file are:

$res = $app->response();
$res->header('Access-Control-Allow-Origin', '*');
$res->header("Access-Control-Allow-Methods: PUT, GET, POST, DELETE, OPTIONS");

To handle the post data:

$app->post('/user/auth', function () use ($app) {
//code here
});

In my javascript (i'm using the backbone framework) my code is:

 App.userAuth = new App.UserAuthModel({
  username: $('#username').val(),
  password: hex_md5($('#password').val())
});

App.userAuth.save({}, {
  success: function(model, resp) {
    console.log(resp);
  },
  error: function(model, response) {
    console.log(response);
  }
});

Any help would be much appreciated, I've been stuck on this for ages!

Answer 1

I had a similar cross domain POST problem (in fact with all headers except GET). The following resolved it:

if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {
    if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_METHOD']) && (   
       $_SERVER['HTTP_ACCESS_CONTROL_REQUEST_METHOD'] == 'POST' || 
       $_SERVER['HTTP_ACCESS_CONTROL_REQUEST_METHOD'] == 'DELETE' || 
       $_SERVER['HTTP_ACCESS_CONTROL_REQUEST_METHOD'] == 'PUT' )) {
             header('Access-Control-Allow-Origin: *');
             header("Access-Control-Allow-Credentials: true"); 
             header('Access-Control-Allow-Headers: X-Requested-With');
             header('Access-Control-Allow-Headers: Content-Type');
             header('Access-Control-Allow-Methods: POST, GET, OPTIONS, DELETE, PUT'); // http://stackoverflow.com/a/7605119/578667
             header('Access-Control-Max-Age: 86400'); 
      }
  exit;
}

Answer 2

In your javascript client you're making an OPTIONS request to /user/auth, but in your PHP code you're only accepting POST requests through this endpoint.

If you want your API to accept OPTIONS method you should have something like this in your code:

$app->options('/user/auth', function () use ($app) {
    //code here
});

Or, if you want to handle multiple HTTP methods in the same function:

$app->map('/user/auth', function () use ($app) {
    if ($app->request()->isOptions()) {
        //handle options method
    }

    else if ($app->request()->isPost()) {
        //handle post method
    }
})->via('POST', 'OPTIONS');

Keep in mind that the OPTIONS method, according to W3C:

[...] represents a request for information about the communication options available on the request/response chain identified by the Request-URI. This method allows the client to determine the options and/or requirements associated with a resource, or the capabilities of a server, without implying a resource action or initiating a resource retrieval.

Alternatively, just change your client's code to make a POST request instead of OPTIONS request. It's easier and makes more sense than authenticating a user through the OPTIONS method. In zepto.js it would be something like this:

$.post('/user/auth', { foo: 'bar' }, function(response){ 
    console.log(response);
});

Answer 3

Your OPTIONS request should be a 200 returning an empty response. Then the browser will send the real POST request.

Also no need to add OPTIONS in Access-Control-Allow-Methods header.

It seems your using authentication, why not add Access-Control-Allow-Credentials header too.

For more informations check this code it may be helpful.

Answer 4

CorsSlim helped me. https://github.com/palanik/CorsSlim

<?php 
$app = new \Slim\Slim();
$corsOptions = array("origin" => "*",
"exposeHeaders" => array("Content-Type", "X-Requested-With", "X-authentication", "X-client"),
"allowMethods" => array('GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'));
$cors = new \CorsSlim\CorsSlim($corsOptions);
$app->add($cors);