Javascript 使用XMLHttpRequest时，CORs未启用？

我花了数小时试图从其他域访问资源

<script type="text/javascript">
    function log(msg){
        var output = $('#output');
        output.text(output.text() + " | " + msg);
        console.log(msg);
    }

    function createCORSRequest(method, url){
        var xhr = new XMLHttpRequest();
        if ("withCredentials" in xhr){
            xhr.open(method, url, true);

            log("'withCredentials' exist in xhr");
        } else if (typeof XDomainRequest != "undefined"){
            xhr = new XDomainRequest();
            xhr.open(method, url);

            log("XDomainRequest is being used");
        } else {
            xhr = null;

            log("xhr is null");
        }
        return xhr;
    }

    function main(){
        log("Attempting to make CORS request");

        var request = createCORSRequest("get", "https://www.nczonline.net/");
        if (request){
            request.onload = function(){
                log("LOADED!");
            };

            request.send();
        }
    }

    $(window).load(function(){
        main();
    });
</script>

其他SO帖子中引用的内容指出，通过在支持CORS的浏览器中简单地使用

XMLHttpRequest

，应该启用CORS策略。然而，我仍然得到

跨源请求被阻止：同一源策略不允许读取远程资源https://www.nczonline.net/. 这可以通过将资源移动到同一域或启用CORS来解决。

<script type="text/javascript">
    function log(msg){
        var output = $('#output');
        output.text(output.text() + " | " + msg);
        console.log(msg);
    }

    function createCORSRequest(method, url){
        var xhr = new XMLHttpRequest();
        if ("withCredentials" in xhr){
            xhr.open(method, url, true);

            log("'withCredentials' exist in xhr");
        } else if (typeof XDomainRequest != "undefined"){
            xhr = new XDomainRequest();
            xhr.open(method, url);

            log("XDomainRequest is being used");
        } else {
            xhr = null;

            log("xhr is null");
        }
        return xhr;
    }

    function main(){
        log("Attempting to make CORS request");

        var request = createCORSRequest("get", "https://www.nczonline.net/");
        if (request){
            request.onload = function(){
                log("LOADED!");
            };

            request.send();
        }
    }

    $(window).load(function(){
        main();
    });
</script>

当在Firefox34中使用它时，根据这一点就足够了

<script type="text/javascript">
    function log(msg){
        var output = $('#output');
        output.text(output.text() + " | " + msg);
        console.log(msg);
    }

    function createCORSRequest(method, url){
        var xhr = new XMLHttpRequest();
        if ("withCredentials" in xhr){
            xhr.open(method, url, true);

            log("'withCredentials' exist in xhr");
        } else if (typeof XDomainRequest != "undefined"){
            xhr = new XDomainRequest();
            xhr.open(method, url);

            log("XDomainRequest is being used");
        } else {
            xhr = null;

            log("xhr is null");
        }
        return xhr;
    }

    function main(){
        log("Attempting to make CORS request");

        var request = createCORSRequest("get", "https://www.nczonline.net/");
        if (request){
            request.onload = function(){
                log("LOADED!");
            };

            request.send();
        }
    }

    $(window).load(function(){
        main();
    });
</script>

我正在尝试一个简单的例子

<script type="text/javascript">
    function log(msg){
        var output = $('#output');
        output.text(output.text() + " | " + msg);
        console.log(msg);
    }

    function createCORSRequest(method, url){
        var xhr = new XMLHttpRequest();
        if ("withCredentials" in xhr){
            xhr.open(method, url, true);

            log("'withCredentials' exist in xhr");
        } else if (typeof XDomainRequest != "undefined"){
            xhr = new XDomainRequest();
            xhr.open(method, url);

            log("XDomainRequest is being used");
        } else {
            xhr = null;

            log("xhr is null");
        }
        return xhr;
    }

    function main(){
        log("Attempting to make CORS request");

        var request = createCORSRequest("get", "https://www.nczonline.net/");
        if (request){
            request.onload = function(){
                log("LOADED!");
            };

            request.send();
        }
    }

    $(window).load(function(){
        main();
    });
</script>

<script type="text/javascript">
    function log(msg){
        var output = $('#output');
        output.text(output.text() + " | " + msg);
        console.log(msg);
    }

    function createCORSRequest(method, url){
        var xhr = new XMLHttpRequest();
        if ("withCredentials" in xhr){
            xhr.open(method, url, true);

            log("'withCredentials' exist in xhr");
        } else if (typeof XDomainRequest != "undefined"){
            xhr = new XDomainRequest();
            xhr.open(method, url);

            log("XDomainRequest is being used");
        } else {
            xhr = null;

            log("xhr is null");
        }
        return xhr;
    }

    function main(){
        log("Attempting to make CORS request");

        var request = createCORSRequest("get", "https://www.nczonline.net/");
        if (request){
            request.onload = function(){
                log("LOADED!");
            };

            request.send();
        }
    }

    $(window).load(function(){
        main();
    });
</script>

函数日志（msg）{
变量输出=$（“#输出”）；
output.text（output.text（）+“|”+msg）；
控制台日志（msg）；
}
函数createCORSRequest（方法，url）{
var xhr=new XMLHttpRequest（）；
如果（xhr中的“带凭证”）{
open（方法、url、true）；
日志（“'withCredentials'存在于xhr中”）；
}else if（XDomainRequest的类型！=“未定义”）{
xhr=新的XDomainRequest（）；
open（方法，url）；
日志（“正在使用XDomainRequest”）；
}否则{
xhr=null；
日志（“xhr为空”）；
}
返回xhr；
}
函数main（）{
日志（“试图提出CORS请求”）；
var请求=createCORSRequest（“获取”https://www.nczonline.net/");
如果（请求）{
request.onload=函数（）{
日志（“已加载！”）；
};
request.send（）；
}
}
$（窗口）。加载（函数（）{
main（）；
});

<script type="text/javascript">
    function log(msg){
        var output = $('#output');
        output.text(output.text() + " | " + msg);
        console.log(msg);
    }

    function createCORSRequest(method, url){
        var xhr = new XMLHttpRequest();
        if ("withCredentials" in xhr){
            xhr.open(method, url, true);

            log("'withCredentials' exist in xhr");
        } else if (typeof XDomainRequest != "undefined"){
            xhr = new XDomainRequest();
            xhr.open(method, url);

            log("XDomainRequest is being used");
        } else {
            xhr = null;

            log("xhr is null");
        }
        return xhr;
    }

    function main(){
        log("Attempting to make CORS request");

        var request = createCORSRequest("get", "https://www.nczonline.net/");
        if (request){
            request.onload = function(){
                log("LOADED!");
            };

            request.send();
        }
    }

    $(window).load(function(){
        main();
    });
</script>

我得到以下输出：

<script type="text/javascript">
    function log(msg){
        var output = $('#output');
        output.text(output.text() + " | " + msg);
        console.log(msg);
    }

    function createCORSRequest(method, url){
        var xhr = new XMLHttpRequest();
        if ("withCredentials" in xhr){
            xhr.open(method, url, true);

            log("'withCredentials' exist in xhr");
        } else if (typeof XDomainRequest != "undefined"){
            xhr = new XDomainRequest();
            xhr.open(method, url);

            log("XDomainRequest is being used");
        } else {
            xhr = null;

            log("xhr is null");
        }
        return xhr;
    }

    function main(){
        log("Attempting to make CORS request");

        var request = createCORSRequest("get", "https://www.nczonline.net/");
        if (request){
            request.onload = function(){
                log("LOADED!");
            };

            request.send();
        }
    }

    $(window).load(function(){
        main();
    });
</script>

试图发出CORS请求
xhr中存在“withCredentials”
已阻止跨源请求：同一源策略不允许读取位于的远程资源https://www.nczonline.net/. 这可以通过将资源移动到同一域或启用CORS来解决。

<script type="text/javascript">
    function log(msg){
        var output = $('#output');
        output.text(output.text() + " | " + msg);
        console.log(msg);
    }

    function createCORSRequest(method, url){
        var xhr = new XMLHttpRequest();
        if ("withCredentials" in xhr){
            xhr.open(method, url, true);

            log("'withCredentials' exist in xhr");
        } else if (typeof XDomainRequest != "undefined"){
            xhr = new XDomainRequest();
            xhr.open(method, url);

            log("XDomainRequest is being used");
        } else {
            xhr = null;

            log("xhr is null");
        }
        return xhr;
    }

    function main(){
        log("Attempting to make CORS request");

        var request = createCORSRequest("get", "https://www.nczonline.net/");
        if (request){
            request.onload = function(){
                log("LOADED!");
            };

            request.send();
        }
    }

    $(window).load(function(){
        main();
    });
</script>

在小提琴上试一下也会得到同样的结果。是否还有其他杠杆需要打开，才能使用XMLHttpRequest使用CORS？

可以在服务器发送给您的请求的响应中找到。如果请求的页面没有发送标题，那么无论您在股票浏览器中对请求做了什么，您都会收到一个安全错误

<script type="text/javascript">
    function log(msg){
        var output = $('#output');
        output.text(output.text() + " | " + msg);
        console.log(msg);
    }

    function createCORSRequest(method, url){
        var xhr = new XMLHttpRequest();
        if ("withCredentials" in xhr){
            xhr.open(method, url, true);

            log("'withCredentials' exist in xhr");
        } else if (typeof XDomainRequest != "undefined"){
            xhr = new XDomainRequest();
            xhr.open(method, url);

            log("XDomainRequest is being used");
        } else {
            xhr = null;

            log("xhr is null");
        }
        return xhr;
    }

    function main(){
        log("Attempting to make CORS request");

        var request = createCORSRequest("get", "https://www.nczonline.net/");
        if (request){
            request.onload = function(){
                log("LOADED!");
            };

            request.send();
        }
    }

    $(window).load(function(){
        main();
    });
</script>

相关的CORS标题如下所示，最后一个是最重要的

<script type="text/javascript">
    function log(msg){
        var output = $('#output');
        output.text(output.text() + " | " + msg);
        console.log(msg);
    }

    function createCORSRequest(method, url){
        var xhr = new XMLHttpRequest();
        if ("withCredentials" in xhr){
            xhr.open(method, url, true);

            log("'withCredentials' exist in xhr");
        } else if (typeof XDomainRequest != "undefined"){
            xhr = new XDomainRequest();
            xhr.open(method, url);

            log("XDomainRequest is being used");
        } else {
            xhr = null;

            log("xhr is null");
        }
        return xhr;
    }

    function main(){
        log("Attempting to make CORS request");

        var request = createCORSRequest("get", "https://www.nczonline.net/");
        if (request){
            request.onload = function(){
                log("LOADED!");
            };

            request.send();
        }
    }

    $(window).load(function(){
        main();
    });
</script>

Access-Control-Allow-Credentials: false
Access-Control-Allow-Methods: GET
Access-Control-Allow-Origin: *

我尝试打开“nczonline.net”，但当我查看响应头时，没有看到任何响应头，因此服务器未配置为允许以这种方式加载

<script type="text/javascript">
    function log(msg){
        var output = $('#output');
        output.text(output.text() + " | " + msg);
        console.log(msg);
    }

    function createCORSRequest(method, url){
        var xhr = new XMLHttpRequest();
        if ("withCredentials" in xhr){
            xhr.open(method, url, true);

            log("'withCredentials' exist in xhr");
        } else if (typeof XDomainRequest != "undefined"){
            xhr = new XDomainRequest();
            xhr.open(method, url);

            log("XDomainRequest is being used");
        } else {
            xhr = null;

            log("xhr is null");
        }
        return xhr;
    }

    function main(){
        log("Attempting to make CORS request");

        var request = createCORSRequest("get", "https://www.nczonline.net/");
        if (request){
            request.onload = function(){
                log("LOADED!");
            };

            request.send();
        }
    }

    $(window).load(function(){
        main();
    });
</script>

如果您是该网站的管理员，您可能需要考虑将所需的标题添加到您的响应中，可能是关于允许的源，而不是使用通配符

。

<script type="text/javascript">
    function log(msg){
        var output = $('#output');
        output.text(output.text() + " | " + msg);
        console.log(msg);
    }

    function createCORSRequest(method, url){
        var xhr = new XMLHttpRequest();
        if ("withCredentials" in xhr){
            xhr.open(method, url, true);

            log("'withCredentials' exist in xhr");
        } else if (typeof XDomainRequest != "undefined"){
            xhr = new XDomainRequest();
            xhr.open(method, url);

            log("XDomainRequest is being used");
        } else {
            xhr = null;

            log("xhr is null");
        }
        return xhr;
    }

    function main(){
        log("Attempting to make CORS request");

        var request = createCORSRequest("get", "https://www.nczonline.net/");
        if (request){
            request.onload = function(){
                log("LOADED!");
            };

            request.send();
        }
    }

    $(window).load(function(){
        main();
    });
</script>

如果您只是尝试演示您的代码，并希望与第三方一起尝试，请加载一个确实发送这些标题的页面，例如，

用于您的安全，而不是服务器的安全：它防止恶意脚本使用您的cookie访问其他服务器上的数据。

<script type="text/javascript">
    function log(msg){
        var output = $('#output');
        output.text(output.text() + " | " + msg);
        console.log(msg);
    }

    function createCORSRequest(method, url){
        var xhr = new XMLHttpRequest();
        if ("withCredentials" in xhr){
            xhr.open(method, url, true);

            log("'withCredentials' exist in xhr");
        } else if (typeof XDomainRequest != "undefined"){
            xhr = new XDomainRequest();
            xhr.open(method, url);

            log("XDomainRequest is being used");
        } else {
            xhr = null;

            log("xhr is null");
        }
        return xhr;
    }

    function main(){
        log("Attempting to make CORS request");

        var request = createCORSRequest("get", "https://www.nczonline.net/");
        if (request){
            request.onload = function(){
                log("LOADED!");
            };

            request.send();
        }
    }

    $(window).load(function(){
        main();
    });
</script>

因此，如果您愿意，您仍然可以在浏览器上自行禁用它

<script type="text/javascript">
    function log(msg){
        var output = $('#output');
        output.text(output.text() + " | " + msg);
        console.log(msg);
    }

    function createCORSRequest(method, url){
        var xhr = new XMLHttpRequest();
        if ("withCredentials" in xhr){
            xhr.open(method, url, true);

            log("'withCredentials' exist in xhr");
        } else if (typeof XDomainRequest != "undefined"){
            xhr = new XDomainRequest();
            xhr.open(method, url);

            log("XDomainRequest is being used");
        } else {
            xhr = null;

            log("xhr is null");
        }
        return xhr;
    }

    function main(){
        log("Attempting to make CORS request");

        var request = createCORSRequest("get", "https://www.nczonline.net/");
        if (request){
            request.onload = function(){
                log("LOADED!");
            };

            request.send();
        }
    }

    $(window).load(function(){
        main();
    });
</script>

在Chrome/Chrome中，如果要禁用同一源策略，可以使用--disable web security选项启动该策略：

<script type="text/javascript">
    function log(msg){
        var output = $('#output');
        output.text(output.text() + " | " + msg);
        console.log(msg);
    }

    function createCORSRequest(method, url){
        var xhr = new XMLHttpRequest();
        if ("withCredentials" in xhr){
            xhr.open(method, url, true);

            log("'withCredentials' exist in xhr");
        } else if (typeof XDomainRequest != "undefined"){
            xhr = new XDomainRequest();
            xhr.open(method, url);

            log("XDomainRequest is being used");
        } else {
            xhr = null;

            log("xhr is null");
        }
        return xhr;
    }

    function main(){
        log("Attempting to make CORS request");

        var request = createCORSRequest("get", "https://www.nczonline.net/");
        if (request){
            request.onload = function(){
                log("LOADED!");
            };

            request.send();
        }
    }

    $(window).load(function(){
        main();
    });
</script>

chromium-browser --disable-web-security

无论如何，如果您想让它为您的用户工作，如果他们没有在浏览器中禁用此安全检查，他们将无法发出CORS请求（如果不是为了测试，则不鼓励这样做）

<script type="text/javascript">
    function log(msg){
        var output = $('#output');
        output.text(output.text() + " | " + msg);
        console.log(msg);
    }

    function createCORSRequest(method, url){
        var xhr = new XMLHttpRequest();
        if ("withCredentials" in xhr){
            xhr.open(method, url, true);

            log("'withCredentials' exist in xhr");
        } else if (typeof XDomainRequest != "undefined"){
            xhr = new XDomainRequest();
            xhr.open(method, url);

            log("XDomainRequest is being used");
        } else {
            xhr = null;

            log("xhr is null");
        }
        return xhr;
    }

    function main(){
        log("Attempting to make CORS request");

        var request = createCORSRequest("get", "https://www.nczonline.net/");
        if (request){
            request.onload = function(){
                log("LOADED!");
            };

            request.send();
        }
    }

    $(window).load(function(){
        main();
    });
</script>

正如在其他答案中所指出的，如果一些服务器认为这对其用户有用且无害，那么它们可以故意允许此类请求，并且可以使用访问控制头来实现这一点

<script type="text/javascript">
    function log(msg){
        var output = $('#output');
        output.text(output.text() + " | " + msg);
        console.log(msg);
    }

    function createCORSRequest(method, url){
        var xhr = new XMLHttpRequest();
        if ("withCredentials" in xhr){
            xhr.open(method, url, true);

            log("'withCredentials' exist in xhr");
        } else if (typeof XDomainRequest != "undefined"){
            xhr = new XDomainRequest();
            xhr.open(method, url);

            log("XDomainRequest is being used");
        } else {
            xhr = null;

            log("xhr is null");
        }
        return xhr;
    }

    function main(){
        log("Attempting to make CORS request");

        var request = createCORSRequest("get", "https://www.nczonline.net/");
        if (request){
            request.onload = function(){
                log("LOADED!");
            };

            request.send();
        }
    }

    $(window).load(function(){
        main();
    });
</script>

此外，如果你仍然想找到一种方法来为用户提供这种功能，你可以做一个Chrome扩展

<script type="text/javascript">
    function log(msg){
        var output = $('#output');
        output.text(output.text() + " | " + msg);
        console.log(msg);
    }

    function createCORSRequest(method, url){
        var xhr = new XMLHttpRequest();
        if ("withCredentials" in xhr){
            xhr.open(method, url, true);

            log("'withCredentials' exist in xhr");
        } else if (typeof XDomainRequest != "undefined"){
            xhr = new XDomainRequest();
            xhr.open(method, url);

            log("XDomainRequest is being used");
        } else {
            xhr = null;

            log("xhr is null");
        }
        return xhr;
    }

    function main(){
        log("Attempting to make CORS request");

        var request = createCORSRequest("get", "https://www.nczonline.net/");
        if (request){
            request.onload = function(){
                log("LOADED!");
            };

            request.send();
        }
    }

    $(window).load(function(){
        main();
    });
</script>

一个常见的解决方案是在服务器端进行跨源请求，将结果返回给应用程序。您应该小心编码：将url传递给服务器将很容易导致服务器端软件的安全问题。但是，如果每次都必须获取相同的url，可以在服务器端硬编码，在PHP中类似如下：

<script type="text/javascript">
    function log(msg){
        var output = $('#output');
        output.text(output.text() + " | " + msg);
        console.log(msg);
    }

    function createCORSRequest(method, url){
        var xhr = new XMLHttpRequest();
        if ("withCredentials" in xhr){
            xhr.open(method, url, true);

            log("'withCredentials' exist in xhr");
        } else if (typeof XDomainRequest != "undefined"){
            xhr = new XDomainRequest();
            xhr.open(method, url);

            log("XDomainRequest is being used");
        } else {
            xhr = null;

            log("xhr is null");
        }
        return xhr;
    }

    function main(){
        log("Attempting to make CORS request");

        var request = createCORSRequest("get", "https://www.nczonline.net/");
        if (request){
            request.onload = function(){
                log("LOADED!");
            };

            request.send();
        }
    }

    $(window).load(function(){
        main();
    });
</script>

<?php
    echo file_get_contents("http://your_cross_request/");
?>

---

然后向该页面发出ajax请求（来自同一来源）将返回远程url的内容。

这使得CORS似乎对生产毫无用处，因为我们不能期望用户在启动浏览器时禁用安全策略这正是关键所在。浏览器中默认禁用COR，因为它们会导致重要的安全问题，因此在生产中不可能依赖COR，chrome扩展除外。@NickolayKondratyev:这个答案有点误导。CORS与浏览器安全级别无关。它是一种协议，使服务器能够告诉浏览器使用XHR获取数据是可以的，而不是因为数据是跨源的而阻止它。要启用CORS，您需要修改从中获取数据的服务器（并非总是可能的），并使其发送CORS头，以允许您的站点获取其数据。这个答案中的所有内容都是关于同源策略的，这是一个相关的主题，但不是CORS。现在，当我试图用

https://developer.mozilla.org/en-US/

（来自）正如@Paul S所建议的那样，我没有收到CORS错误。但我没有在禁用安全性的情况下启动浏览器，我只是像往常一样启动了firefox。为

访问控制允许源代码使用通配符会使符合要求的用户代理在飞行前请求后拒绝提供任何凭据（获取上述响应的标题）。来源：
<script type="text/javascript">
    function log(msg){
        var output = $('#output');
        output.text(output.text() + " | " + msg);
        console.log(msg);
    }

    function createCORSRequest(method, url){
        var xhr = new XMLHttpRequest();
        if ("withCredentials" in xhr){
            xhr.open(method, url, true);

            log("'withCredentials' exist in xhr");
        } else if (typeof XDomainRequest != "undefined"){
            xhr = new XDomainRequest();
            xhr.open(method, url);

            log("XDomainRequest is being used");
        } else {
            xhr = null;

            log("xhr is null");
        }
        return xhr;
    }

    function main(){
        log("Attempting to make CORS request");

        var request = createCORSRequest("get", "https://www.nczonline.net/");
        if (request){
            request.onload = function(){
                log("LOADED!");
            };

            request.send();
        }
    }

    $(window).load(function(){
        main();
    });
</script>