CORS (cross origin resource sharing) using PHP

i just followed PHP header of CORS and i have a strange behavior here i create a two simple pages one page (content.php) using port 1112 and the other page which (sample.html) using port 1113 in my local machine and i noticed strange behavior sample.html trying to retrieve information from content.php here is the code for both pages sample.html

<!DOCTYPE html>
<html>
<head>
<title>Sample</title>
<script type="text/javascript">
    var xmlhttp = new XMLHttpRequest();
    function makerequest(serverPage, objID) {
        var obj = document.getElementById(objID);
        xmlhttp.open("POST", serverPage);
        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                obj.innerHTML = xmlhttp.responseText;
            }
        }
        xmlhttp.send();
}
</script>
<body onload="makerequest ('http://localhost:1112/content.php','hw')">
<div align="center">
<h1>Sample</h1>
<div id="hw"></div>
</div>
</body>
</html>

and the other page content.php

<!DOCTYPE HTML>
<html>
<head>
<?php
header("Access-Control-Allow-Origin: http://localhost:1113/sample.html");
?>
<title>page1</title>
</head>
<body>
<div style="width: 770px; text-align: left; color: green;">
<h1>Page 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod?
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, ?
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.?
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu ?
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in?
culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</body>
</html>

now when i am trying to run sample.html using chrome & firefox it's blocked even if i give in the header the origin link and if i run it using IE it's work to make it work i need to give the header ( * ) which different from what i want to do i tried to figure out why it's not working as i want in chrome and firefox

here is the error message i get it from chrome XMLHttpRequest cannot load http://localhost:1112/content1.php. The 'Access-Control-Allow-Origin' header has a value 'http://localhost:1113/sample.html' that is not equal to the supplied origin. Origin 'http://localhost:1113' is therefore not allowed access.

Solution

Make the following changes to your code:

File: content.php

<?php
//header("Access-Control-Allow-Origin: http://localhost:1113/sample.html");
header("Access-Control-Allow-Origin: http://localhost:1113");

It should work.

The definition of same origin as enforced by SOP (and that CORS helps bypass) is: "Two pages have the same origin if the protocol, port, and host are the same for both pages.".

In your code, you are supposed to add the CORS header to reflect the origin that can be allowed by the browser to display the contents of "content.php" hence you have to specify the "origin" as the header value and that is http://localhost:1113 (not 'http://localhost:1113/sample.html').

Also, the statement "Unfortunately I believe you will get CORS issues no matter what with localhost, consider trying the local IP instead." in Fredo's answer is not correct. The browser will treat [scheme+host+port] in totality when determining the origin. So, using localhost with different port numbers should be treated as different origins without any issue.