Cordova AJAX POST permission

Question

I'm building a Cordova APP with simple REST calls.

The issue is when I make a AJAX with POST, Chrome sends me: "XMLHttpRequest cannot load http://192.168.1.111/project/app. Response for preflight has invalid HTTP status code 405" on console.

But, if I make a AJAX call with GET (basically return an value from database) the things works like a charm.

My AJAX call is:

$.ajax({
  url: "http://192.168.1.111/project/app",
  type: "POST",
  dataType: "json",
  contentType: 'application/json',
  data: {
    "name": "Cordova"
  },
  success: function() {
    navigator.notification.alert("Success!");
  },
  error: function(jqXHR, textStatus, errorThrown) {
    console.log(textStatus + jqXHR.responseText);
  }
});

POST handler in REST

require 'Slim/Slim.php';
$app = new Slim();
$app->post('/app', 'addApp');
$app->run();

function addApp() {
    error_log('addApp\n', 3, '/var/tmp/php.log');
    $request = Slim::getInstance()->request();
    $callback = json_decode($request->getBody());
    $sql = "INSERT INTO app (name) VALUES (:name)";
    try {
        $db = getConnection();
        $stmt = $db->prepare($sql);  
        $stmt->bindParam("name", $callback->name);
        $stmt->execute();
        $callback->id = $db->lastInsertId();
        $db = null;
        echo json_encode($callback); 
    } catch(PDOException $e) {
        error_log($e->getMessage(), 3, '/var/tmp/php.log');
        echo '{"error":{"text":'. $e->getMessage() .'}}'; 
    }
}

function getConnection() {
    $dbhost="localhost";
    $dbuser="myuser";
    $dbpass="mypass";
    $dbname="mydb";
    $dbh = new PDO("mysql:host=$dbhost;dbname=$dbname", $dbuser, $dbpass);  
    $dbh->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    return $dbh;
}

What i've tried:

1#: Access origin in config.xml

<access origin="*" />

2#: Add the connect-src MY IP to meta tag

<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; connect-src 'self' http://192.168.1.111">

3#: Add Access-Control-Allow-Origin in my REST app .htaccess

Header add Access-Control-Allow-Origin "*"
Header add Access-Control-Allow-Methods: "GET,POST,OPTIONS,DELETE,PUT"

4#: Add support cors in JavaScript

$.support.cors = true;
$.mobile.allowCrossDomainPages = true;

5#: To check if is not error in Server POST, I used CURL and works normal (success)

curl -i -X POST -H 'Content-Type: application/json' -d '{"name": "Cordova"}' http://192.168.1.111/project/app

OBS: I'm using Slim framework to REST (http://coenraets.org/blog/2011/12/restful-services-with-jquery-php-and-the-slim-framework/)

================

Update #1:

I've upload my database and application to an online host and the results still the same.

================

Update #2:

Doing another tests, I noticed that removing the contentType: "application/json" the debugger shows another error.

SQLSTATE[23000]: Integrity constraint violation: 1048 Column 'name' cannot be empty

================

It's been two days that I'm trying to resolve this and nothing appears as a solution. I'm really sad.

Answer 1

I think the problem may be this:

the preflight error is due to the fact that the client is making a OPTIONS request (before the post); this request is not handle correctly by the server. Since the OPTIONS request is not handled by the server the next POST is not processed. So first of all check with the debugger (or sniffing on the server) which is the request that is causing the error you mention. If my guess is right handle it and you will see that the next POST will be excuted correctly by the client.