如何解决“Cross-Origin Request Blocked”错误？

Question

I have problem with CORS. I already search many time in google to solve this problem, but doesn't work.

I make a popup dialog procedure with external popup.js file. This js file can show popup dialog when I call that file from any page in same project( myweb.com ).

But the problem is when I call this js file from another website like this,

<script type="text/javascript" src="http://www.myweb.com/admin/popup.js"></script>
<script> document.addEventListener("DOMContentLoaded", function(event) {
    create_popup();
}); 
</script>

I get this error,

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://www.myweb.com/admin/get_data.php?t=0.4987759219367701.
(Reason: missing token 'access-control-allow-methods' in CORS header 'Access-Control-Allow-Headers' from CORS preflight channel).

In my js file I run get_data.php file by using ajax. Here is my js file,

function create_popup() {

    var xmlhttp = new XMLHttpRequest();
    if("withCredentials" in xmlhttp){
        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                var arr = JSON.parse(xmlhttp.responseText);
                alert(arr);
            }
        xmlhttp.open("GET","http://www.myweb.com/admin/get_data.php?t="+Math.random(),true);
        xmlhttp.setRequestHeader( "Pragma", "no-cache" );
        xmlhttp.setRequestHeader( "Cache-Control", "no-cache" );
        xmlhttp.setRequestHeader("Access-Control-Allow-Origin","*");
        xmlhttp.setRequestHeader("Access-Control-Allow-Credentials", "true");
        xmlhttp.setRequestHeader("Access-Control-Allow-Methods", "GET");
        xmlhttp.setRequestHeader("Access-Control-Allow-Headers", "Content-Type");
        xmlhttp.send();
    }else{
        alert("error");
        console.log("error");
    }   
}

This js file is only work in myweb.com . But when I try to call this js from another website I get CORS error.

And I also add header for CORS in get_data.php file like this,

header("Access-Control-Allow-Origin:*");
header("Access-Control-Allow-Methods:GET");
header("Access-Control-Allow-Headers:Content-Type");
header("Access-Control-Allow-Credentials:true");

But it doesn't work. I'm not sure about header declaration is ok or not in js and php file. I try a lot but I don't know how to solve.

And I already try in chrome browser with Allow-Control-Allow-Origin extensions. But I can't see popup and error. I don't know which part is wrong. I very appreciate for your suggestion.

Answer 1

(Reason: missing token 'access-control-allow-methods' in CORS header 'Access-Control-Allow-Headers' from CORS preflight channel).

This shows that the preflight is failing

preflight only occurs under certain conditions, one of which is when you add "custom" headers to the request

as you are incorrectly adding headers to your request (headers which only make sense as response headers anyway)

   xmlhttp.setRequestHeader("Access-Control-Allow-Origin","*");
   xmlhttp.setRequestHeader("Access-Control-Allow-Credentials", "true");
   xmlhttp.setRequestHeader("Access-Control-Allow-Methods", "GET");
   xmlhttp.setRequestHeader("Access-Control-Allow-Headers", "Content-Type");

a preflight is triggered (as they are custom headers) - your server doesn't handle (doesn't even ALLOW) preflight, hence the preflight error

Remove those setRequestHeader lines, and it should work