Cordova AJAX POST权限

Question

我正在使用简单的REST调用构建Cordova APP.

问题是,当我使用POST制作AJAX时,Chrome发送给我:"XMLHttpRequest无法加载http://192.168.1.111/project/app.预处理的响应在控制台上具有无效的HTTP状态代码405".

但是,如果我使用GET进行AJAX调用(基本上从数据库中返回一个值),那就像魅力一样.

我的AJAX电话是:

$.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);
  }
});

REST中的POST处理程序

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

我尝试过的:

1#:访问config.xml中的原点

<access origin="*" />

2#:将connect-src MY IP添加到元标记

<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#:在我的REST应用程序.htaccess中添加Access-Control-Allow-Origin

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

4#:在JavaScript中添加支持cors

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

5#:要检查Server POST中是否没有错误,我使用了CURL并正常工作(成功)

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

OBS:我正在使用Slim框架来REST(http://coenraets.org/blog/2011/12/restful-services-with-jquery-php-and-the-slim-framework/)

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

更新#1:

我已将我的数据库和应用程序上传到在线主机,结果仍然相同.

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

更新#2:

做另一个测试,我注意到删除了contentType:"application/json"调试器显示另一个错误.

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

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

已经有两天我试图解决这个问题并没有出现任何解决方案.我真的很伤心.

Answer 1

在阅读了 StackOverflow 中的大约 60 个问题以及有关 CORS、PHP 和访问控制的内容后，我得出了一个“简单的解决方案”。

但是，在发布解决方案之前，我想说这种问题太“普遍”，错误可能在任何地方。

好的，首先，该解决方案不适用于 Chrome。Chrome 将始终返回 405 状态代码，但是，在真实设备（或模拟器）中运行 cordova 应用程序，该解决方案就像一个魅力。是的，这就是 Chrome 阻止跨域请求的问题。

第一步：

AJAX 中的数据必须用“{}”放置。是的，我不知道这一点。如果需要，可以使用 JSON.stringify 来简化操作。

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

第二步：

在 REST API 中，您需要启用Access-Control-Allow-Headers才能正常工作。

<?php header('Access-Control-Allow-Headers: X-Requested-With, origin, content-type'); ?>

目前我的应用程序可以正常使用这些解决方案。我很高兴听到其他解决方案（也适用于 Chrome 中的工作）。

感谢你们！