请求标头字段Access-Control-Allow-Headers在预检响应中不允许使用Access-Control-Allow-Headers

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 
' + 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";

?>

</div>

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.