PHP + AJAX登录页面：在移动设备上需要两次登录

Question

I'm new to programming, and I've created a simple login page - below is the stripped down version without security measures.

<input type="text" name="username">
<input type="password" name="password">
<input type="submit" value="Login">

The data is handled through AJAX:

$.ajax( {
    type: 'POST',
    data: $( this ).serialize(),
    url: 'login.php'
} )

.done( function( data ) {
    if( data == 'login' ) {
        location = 'main/'
    }
} )

Which sends it to a PHP script (login.php). After validating the credentials a cookie is set:

setcookie( 'my_login_page', '12345678', time() + ( 60 * 60 * 24 * 365 ), '/' );

echo 'login';

It works perfectly, but after a while I noticed you have to login twice on mobile devices. The cookie 'disappears'. When you login again, it sticks. For weeks I've been trying to track down the cause, linked an iPhone to Safari for inspection, tried several different approaches for the redirection and more. For example location.reload( true ); instead of redirecting and redirecting with PHP if a cookie was set. Nothing seems to work and I can't find an issue on here that's exactly similar.

Can someone help me out? Maybe this isn't even the right approach for such a login, echoing 'login' feels awkward for example. Thanks in advance.

Answer 1

Are you sure the cookie is disappearing? It sounds like what's happening is mobile safari is refreshing before PHP finishes setting the cookie, so it's not getting the cookie in the header until the next request. What happens when you login once with mobile and then refresh the page?