使用 XMLHttpRequest 时没有启用 CORs？

Question

我花了几个小时试图从不同的域访问资源。

http://www.nczonline.net/blog/2010/05/25/cross-domain-ajax-with-cross-origin-resource-sharing/ 在其他 SO 帖子中被引用指出，通过在支持 CORS 的浏览器中简单地使用 XMLHttpRequest，应该启用 CORS 策略。但是我仍然得到 Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://www.nczonline.net/. This can be fixed by moving the resource to the same domain or enabling CORS.

在 Firefox 34 中使用它时，根据 http://caniuse.com/#feat=cors 应该就足够了。

我正在尝试来自http://www.nczonline.net/blog/2010/05/25/cross-domain-ajax-with-cross-origin-resource-sharing/ 的一个简单示例

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

我得到以下输出：

Attempting to make CORS request 'withCredentials' exist in xhr Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://www.nczonline.net/. This can be fixed by moving the resource to the same domain or enabling CORS.

在小提琴https://jsfiddle.net/zf8ydb9v/ 上尝试它会得到相同的结果。是否有另一个杠杆需要打开才能使用 XMLHttpRequest 使用 CORS bBesides？

Answer 1

same origin policy（防止发出 CORS 请求）是为了您的安全，而不是服务器的安全：它可以防止恶意脚本使用您的 cookie 访问您在其他服务器上的数据。 因此，如果您愿意，您仍然可以在您的浏览器上禁用它，风险自负。

在 Chrome/Chromium 中，如果您想禁用同源策略，可以使用 --disable-web-security 选项启动它：

chromium-browser --disable-web-security

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

如其他答案中所述，如果某些服务器认为此类请求对其用户有用且无害，则它们可以故意允许此类请求，并且他们可以使用访问控制标头来做到这一点。

此外，如果您仍想找到一种向用户提供此类功能的方法，您可以制作一个 Chrome 扩展程序，which is not bound to the same origin policy。

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

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

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

Answer 2

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

相关的CORS头看起来像这样，最后一个是最重要的

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

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

如果您是该网站的管理员，您可能需要考虑在您的回复中添加所需的标头，可能会具体说明允许的来源，而不是使用通配符

如果您只是想演示您的代码并想与第三方一起尝试，请加载一个发送这些标头的页面，例如developer.mozilla.org