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.
(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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.