如何解决“跨域请求被阻止"?错误? [英] How to solve "Cross-Origin Request Blocked" error?

问题描述

我对CORS有疑问.我已经在Google中搜索了很多时间来解决此问题，但是没有用.

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

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

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

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

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>

我收到此错误

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文件，

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

此js文件仅在myweb.com中可用.但是，当我尝试从另一个网站调用此js时，出现CORS错误.

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

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

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

但是它不起作用.我不确定在js和php文件中是否可以使用标头声明.我做了很多尝试，但是我不知道该怎么解决.

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.

而且我已经在带有Allow-Control-Allow-Origin扩展名的chrome浏览器中尝试过.但是我看不到弹出窗口和错误.我不知道哪一部分错了.非常感谢您的建议.

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

这表明预检失败

预检仅在某些条件下发生，其中之一是在请求中添加自定义"标头

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

预检被触发(因为它们是 custom 标头)-您的服务器无法处理(甚至不允许)预检，因此预检错误

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

删除那些setRequestHeader行，它应该起作用

Remove those setRequestHeader lines, and it should work

这篇关于如何解决“跨域请求被阻止"?错误?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！