javascript - 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 modo 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.

<!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 modo 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>

Share Improve this question edited Dec 19, 2015 at 22:23 asked Nov 29, 2015 at 17:15 M.A.Hassan 5003 gold badges7 silver badges16 bronze badges

Unfortunately I believe you will get CORS issues no matter what with localhost, consider trying the local IP instead. Also, you may need to actually configure your webserver to send the headers, CORS is some picky stuff. Also, for Chrome you need these addtional headers: Access-Control-Allow-Headers and Access-Control-Allow-Methods. – tremor Commented Dec 20, 2015 at 3:27
does CORS only affect localhost? – opeolluwa Commented Sep 24, 2021 at 12:09

Add a ment |

3 Answers 3

Sorted by: Reset to default 1

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.

Try adding these headers:

"Access-Control-Allow-Headers: Cache-Control, Pragma, Origin, Authorization, Content-Type, X-Requested-With"

"Access-Control-Allow-Methods: GET, PUT, POST"

It might also help to add this as a server method rather than via the page in PHP, if apache either in your httpd.conf or in .htaccess.

This answer was derived from this blog post (using node.js / express) http://williambert.online/2013/06/allow-cors-with-localhost-in-chrome/

You may add following lines in  .htaccess code where you have palce sample.html

Header add Access-Control-Allow-Origin "*"
Header add Access-Control-Allow-Headers "origin, x-requested-with, content-type"
Header add Access-Control-Allow-Methods "PUT, GET, POST, DELETE, OPTIONS"

 In sample.html file add below headers on top.

 header("Access-Control-Allow-Origin:*");

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - CORS (cross origin resource sharing) using PHP - Stack Overflow

3 Answers 3

与本文相关的文章

评论列表(0)