2016-02-27 3 views
9

私は単純なREST呼び出しでCordova APPを構築しています。私はPOSTでAJAXを作るときCordova AJAX POST権限

問題があり、Chromeは私を送信します。コンソールに「XMLHttpRequestのはhttp://192.168.1.111/project/appをロードすることはできませんプリフライトの応答が無効なHTTPステータスコード405を持っています。」。

しかし、私はGET(基本的にデータベースから値を返します)を使ってAJAX呼び出しを行うと、物事は魅力的に機能します。

私のAJAX呼び出しがある: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; 
} 

$.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ハンドラは、私が試したもの:

1#:configにアクセス元.xml

<access origin="*" /> 

2#:#

<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メタタグに接続-SRC MY IPを追加します。私のRESTアプリにアクセス制御 - 許可 - 起源を追加した.htaccess

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

4#

JavaScriptでサポートCORSを追加します。 RESTへ
私はスリムなフレームワークを使用しています( http://coenraets.org/blog/2011/12/restful-services-with-jquery-php-and-the-slim-framework/
$.support.cors = true; 
$.mobile.allowCrossDomainPages = true; 

5#:サーバーPOST中にエラーがないかどうかを確認するには、私はCURLを使用し、通常の(成功する)作品

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

OBS )

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

更新#1:

データベースとアプリケーションをオンラインホストにアップロードしましたが、結果は変わりません。

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

更新#2:「アプリケーション/ JSON:別のテストを行う

を、私はのcontentTypeを取り除くことに気づきました"デバッガに別のエラーが表示されます。

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

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

それは、私がこれと何も解決策のように見えるが解決しようとしている2日間となっています。私は本当に悲しいです。

+0

あなたはサーバーが投稿をサポートしていないので、あなたにアクションコードを表示できますか? – Naumov

+0

@Naumov申し訳ありませんが、私はその点を忘れて、私は私の質問を更新しました。サーバーPOSTが動作しています。私はCURLを使用してテストしました。 – reidark

+0

私は多分これがあなたを助けると思うhttp://stackoverflow.com/questions/298745/how-do-i-send-a-cross-domain-post-request-via-javascript and 'url:" http://192.168 http:// ' – Naumov

答えて

-1

StackOverflowで約60件の質問を読んだ後、CORS、PHP、およびAccess Controlに関することを「簡単な解決策」にしました。

しかし、私が解決策を投稿する前に、問題のタイプがあまりにも「一般的」でエラーがどこにでもあると言いたいと思います。

まず、解決策はChromeでは機能しません。 Chromeは常に405のステータスコードを返しますが、実際のデバイス(またはシミュレータ)でコードバスアプリを実行すると、そのソリューションは魅力的に機能します。はい。これはChromeがクロスドメインリクエストをブロックしていることです。

第1工程:

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で

あなたは物事が働くためアクセス制御 - 許可 - ヘッダを有効にする必要があります。

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

現時点では、私のAPPはこれらのソリューションで正常に動作しています。私は他のソリューション(Chromeでの作業についても)について聞いてうれしいです。

ありがとう!

1

私はこの問題は、このかもしれないと思う:

プリフライトエラーは、クライアントが(ポスト前)OPTIONS要求をしているという事実によるものです。この要求はサーバーによって正しく処理されません。 OPTIONS要求はサーバーによって処理されないので、次のPOSTは処理されません。だから最初に、あなたが言及したエラーの原因となっているリクエストであるデバッガ(またはサーバ上で盗聴)をチェックしてください。私の推測が正しいとすれば、次のPOSTがクライアントによって正しく実行されることがわかります。

+1

はい、デバッガでOPTIONSがメインエラーの前に表示されます。しかし、私は正確にこれが何であるか分からない。 – reidark

+0

完璧!サーバー上のOPTIONS要求を処理する必要があります。 – pinturic