Search code examples
phpjqueryjsonhttp-postsame-origin-policy

Same Origin Policy Error , jQuery


I am developing the front-end(html-jquery) and back-end(php) of a Web Service. I am developing in my localhost using XAMPP(Apache). I was keeping my front-end and back-end inside different projects on eclipse just to have everything cleaner.

However, i needed to make an ajax call (Http Post request) from the jQuery to the php server. I always get the error : XMLHttpRequest cannot load http://193.164.4.112/Server_CityInfo/whereSubscribed.php. Origin http://localhost is not allowed by Access-Control-Allow-Origin.

I looked about the error and i found out that it has to do with the Same Origin Policy.

I also read that possible solutions to solve this error are to use CORS , JSONP or a proxy. However , from the definition of the error i understand that by simply keeping the files in the same directory would solve the problem right? So what i did is moved all the frond-end files , into my back-end directory and tried to run again the html pages to make the request.

Boom! I get the same error again.. Am i doing something wrong here? Shouldnt it work now that they are in the same directory?


Solution

  • simply keeping the files in the same directory would solve the problem right

    No. They must be on the same origin (protocol, hostname, port).

    You have:

    http  193.164.4.112  80 (default for HTTP) 
    http  localhost      80 (default for HTTP) 
    

    193.164.4.112 is not localhost so you hit the same origin policy.

    193.164.4.112 and localhost might resolve to the same machine, be handled by the same webserver, and be served the same files, but the browser does not know that. The URLs must match.