“404 error - File or Directory not found” error on mobile browser in ASP.NET MVC 5 with Web API

Question

I am trying token-based authentication in ASP.NET MVC 5. Everything is working on a PC browser (Login page, Register page, Data page).

Here is login script code

<script type="text/javascript">
$(document).ready(function () {
    $('#btnSignIn').click(function () {
        var loginData = {
            grant_type: 'password',
            username: $('#txtSignInEmail').val(),
            password: $('#txtSignInPassword').val()
        };

        $.ajax({
            type: 'POST',
            url: 'Token',
            data: loginData
        }).done(function (data) {

            $('#user').text(data.userName)
            $('#UserName').text(JSON.stringify(data.userName));

            localStorage.setItem('accessToken', data.access_token);
            localStorage.setItem('qubaUserName', JSON.stringify(data.userName));
        }).fail(function (showError) {
            $('#signInError').text(JSON.stringify(showError));
        });
    });
})
</script>

When I try to login on my PC, it successfully logged in.

But on my mobile, it shows an error as shown in the screenshot.

Update

It is only on mobile Chrome browser. I checked with Mozilla, and it shows exactly what I expect

UPDATE

If I make the url:'Token' , It works on local machine and Mozilla browser in Android, but not in any other PC(both chrome and Mozilla) and Android(chrome browser)

when URL: 'Token'

it makes a request from local pc to this link http://localhost/ProjectName/Token

But it makes a request from other pc browser and Android Chrome browser like http://localhost/Token

If I change the URL:'ProjectName/Token' not working in local pc(Where I deployed on IIS), But, it working in all Android browser(chrome and Mozilla) and other pc

when URL: 'ProjectName/Token'

it makes a request from local pc to this link http://localhost/ProjectName/ProjectName/Token

But it makes a request from other pc browser and Android Chrome browser like http://localhost/ProjectName/Token

So how can I make common URL for all client(both local pc and remote client)

Answer 1

Change url to an absolute one with the / at the beginning.

"/ProjectName/Token"

It will definitely point to http://localhost/ProjectName/Token no matter from what url your js script is called.

Answer 2

$.ajax({ type: 'POST', url: 'Token',

change this url token to /token or full qualified path