2016-02-05 17 views
7

クロスドメインからログインページを作成しようとしていますが、問題を解決できませんでした。 :リクエストヘッダーフィールドアクセス制御許可ヘッダーは、プリフライトレスポンスのAccess-Control-Allow-Headersで許可されていません。

XMLHttpRequest cannot load http://localhost/testing/resp.php . Request header field Access-Control-Allow-Headers is not allowed by Access-Control-Allow-Headers in preflight response.

私のJavascriptのコードは次のとおりです。

$('#login').click(function(){ 
 
\t \t var username = $('#uname').val(); 
 
\t \t var password = $('#pass').val(); 
 
\t \t var result = $('.result'); 
 
\t \t result.text('loading....'); 
 

 
\t \t if (username != '' && password !=''){ 
 
\t \t \t var urltopass = 'action=login&username='+username+'&password='+password; 
 
\t \t \t $.ajax({ 
 
\t \t \t \t type: 'POST', 
 
\t \t \t \t data: urltopass, 
 
\t \t \t \t headers: {"Access-Control-Allow-Headers": "Content-Type"}, 
 
\t \t \t \t url: 'http://localhost/testing/resp.php', 
 
\t \t \t \t crossDomain: true, 
 
\t \t \t \t cache: false, 
 
\t \t \t \t success: function(responseText){ 
 
\t \t \t \t \t console.log(responseText); 
 
\t \t \t \t \t if(responseText== "0"){ 
 
\t \t \t \t \t \t result.text('incorrect login information'); 
 
\t \t \t \t \t } else if (responseText == "1"){ 
 
\t \t \t \t \t \t window.location="http://localhost/testing/home.php"; 
 
\t \t \t \t \t } else{ 
 
\t \t \t \t \t \t alert('error in sql query \n' + responseText); 
 
\t \t \t \t \t } 
 
\t \t \t \t } 
 
\t \t \t }); 
 
\t \t } else return false; 
 
\t });

http://localhost/testing/resp.phpのためのPHPコード:

<?php 
 
\t include "db.php"; //Connecting to database 
 

 
\t if (!isset($_SERVER['HTTP_ORIGIN'])) { 
 
\t \t echo "This is not cross-domain request"; 
 
    exit; 
 
} 
 
\t header("Access-Control-Allow-Origin: *"); 
 
\t header("Access-Control-Allow-Credentials: true"); 
 
\t header("Access-Control-Allow-Methods: POST, GET, OPTIONS"); 
 
\t header("Access-Control-Allow-Headers: Content-Type, Authorization, X-Requested-With"); 
 
\t header('P3P: CP="CAO PSA OUR"'); // Makes IE to support cookies 
 
\t header("Content-Type: application/json; charset=utf-8"); 
 

 
\t if (isset($_POST['action']) && $_POST['action'] == 'login'){ 
 
\t \t $uname = $_POST['username']; 
 
\t \t $pass = $_POST['password']; 
 

 
\t \t $sql = "SELECT * FROM loginajax WHERE username='$uname' AND password='$pass'"; 
 
\t 
 
\t \t $rs=$conn->query($sql); 
 

 
\t \t if (mysqli_num_rows($rs) <= 0){ 
 
\t \t \t echo "0"; 
 
\t \t } else { 
 
\t \t \t echo "1"; 
 
\t \t } 
 
\t \t 
 
\t } else echo "this is not Login"; 
 

 
?>

+0

ブラウザのdevツールを使用して、実際に返されているヘッダーを調べることができますか?より一般的な注意:すべてのドメインからのログインを許可するのは良い考えではありませんが、CSRFのようなものに脆弱になります(標準の検証トークンの防御*は、ブラウザが発信元の要求を許可しないことを要求します)。 – Matthew

+0

サーバーがプリフライト要求を出します。 PHPはサーバによってレンダリングされます。サーバーエンジン自体からヘッダーを戻す必要があります。 – ryan0319

答えて

9

この削除:あなたのjQuery.ajaxコールから

headers: {"Access-Control-Allow-Headers": "Content-Type"}, 

を。

サーバーはAccess-Control-Allow-Headersヘッダーで応答しますが、クライアントはサーバーに送信しません。

クライアントはAccess-Control-Request-Headersを送信して特定のヘッダーを許可するように要求すると、サーバーはAccess-Control-Allow-Headersで応答し、実際のヘッダーが許可されます。クライアントは、どのヘッダーが許可されているかを要求することはありません。

+0

リクエストヘッダーは無効になっていますが、サーバから何も返信されません – Anahoua16

+0

@ Anahoua16、ajaxオプションにエラーコールバックを追加します。つまり、 'error:function(){}'渡された状態/エラー –

+0

ステータス:200 textStatus:parsererror errorThrown:SyntaxError:予期しないトークンはありません。 – Anahoua16

関連する問題