ajax call to php not working 404 error mismatched localhost - php

Question

I'm using xampp on my Windows 10 dev machine and when I launch my javascript app using chrome, the browser uses localhost:8080 as the root directory.
For my php ajax calls, I have to use the fully qualified path to get them to work. For example:
$.ajax({
type: "GET",
dataType: "json",
url: "http://localhost/get_user.php",
data: {email: $("#email").val()}
});
Note that I have to use localhost for the ajax calls whereas the javascript root is localhost:8080. My php files are stored locally in c:/xampp/htdocs.
I want to use a short form url that works on both my local dev machine and on the production website. Something like
$.ajax({
type: "GET",
dataType: "json",
url: "/get_user.php",
data: {email: $("#email").val()}
});
My understanding (and I'm new to this) is that if I use the short form url /get_user.php the system uses the same root as the client side app (i.e. http://localhost:8080/get_user.php). But only fully qualified http://localhost/get_user.php is working for my ajax calls.
I get the following error message when using the short form /get_user.php:
GET
http://localhost:8080/check_login.php?password=xxxxxxxxxx&email=drew%40aol.com
404 (Not Found)
So the client side uses localhost:8080 and the server side expects localhost. I'm sure this is probably an xampp config issue but haven't been able to solve on my own. Any insight would be appreciated.

Answer 1

Try changing your data type to jsonp rather than json. I think you are running into a cross-origin resource sharing problem. A permission problem, essentially. localhost and localhost:8080 are two different domains, as far as your browser is concerned. If your code is executed from localhost:8080 and you give it a relative url, like /something.php, it assumes you are requesting it from the same domain. localhost is equivalent to localhost:80.