Request header field Access-Control-Allow-Headers is not allowed by Access-Control-Allow-Headers in preflight response

Question

I am trying to make a login page from cross domain but I couldn't solve the problem, the error is:

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.

My Javascript code is:

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

The PHP code for http://localhost/testing/resp.php :

 <?php include "db.php"; //Connecting to database if (!isset($_SERVER['HTTP_ORIGIN'])) { echo "This is not cross-domain request"; exit; } header("Access-Control-Allow-Origin: *"); header("Access-Control-Allow-Credentials: true"); header("Access-Control-Allow-Methods: POST, GET, OPTIONS"); header("Access-Control-Allow-Headers: Content-Type, Authorization, X-Requested-With"); header('P3P: CP="CAO PSA OUR"'); // Makes IE to support cookies header("Content-Type: application/json; charset=utf-8"); if (isset($_POST['action']) && $_POST['action'] == 'login'){ $uname = $_POST['username']; $pass = $_POST['password']; $sql = "SELECT * FROM loginajax WHERE username='$uname' AND password='$pass'"; $rs=$conn->query($sql); if (mysqli_num_rows($rs) <= 0){ echo "0"; } else { echo "1"; } } else echo "this is not Login"; ?> 

Answer 1

remove this:

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

from your jQuery.ajax call.

The server responds with a Access-Control-Allow-Headers header, the client doesn't send it to the server.

The client sends a Access-Control-Request-Headers to request allowing certain headers, the server responds back with with a Access-Control-Allow-Headers that lists the actual headers its going to allow. The client does not get to demand what headers are allowed.