javascript - 如何解决 "Cross-Origin Request Blocked"错误？

Question

我对 CORS 有疑问。我已经在谷歌中搜索了很多次来解决这个问题，但没有用。

我用外部 popup.js 文件制作了一个弹出对话框程序。当我从同一项目 (myweb.com) 的任何页面调用该文件时，该 js 文件可以显示弹出对话框。

但问题是当我像这样从另一个网站调用这个js文件时，

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

我收到这个错误，

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).

在我的 js 文件中，我使用 ajax 运行 get_data.php 文件。这是我的 js 文件，

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");
    }   
}

此 js 文件仅适用于 myweb.com。但是当我尝试从另一个网站调用这个 js 时，我得到了 CORS 错误。

我还像这样在 get_data.php 文件中添加了 CORS 的 header ，

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

但它不起作用。我不确定 js 和 php 文件中的 header 声明是否正确。我尝试了很多，但我不知道如何解决。

我已经在 chrome 浏览器中尝试使用 Allow-Control-Allow-Origin 扩展。但我看不到弹出窗口和错误。我不知道哪一部分是错的。非常感谢您的建议。

Answer 1

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

这表明预检失败

预检仅在特定条件下发生，其中之一是当您向请求添加“自定义” header 时

因为您错误地向您的请求添加 header ( header 无论如何只作为响应 header 有意义)

   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");

预检被触发(因为它们是自定义 header )——您的服务器不处理(甚至不允许)预检，因此预检错误

删除那些 setRequestHeader 行，它应该工作