无法从 jquery 和纯 javascript 调用 CORS Web 服务

Question

我正在尝试访问 a public web service provided by USGS。根据网页，他们支持 CORS，甚至提供了一个 JQuery 示例（值得一提的是示例没有设置 header），但我尝试了一切，到目前为止没有运气。在 Whosebug 上有很多关于 cross-domain ajax 和 CORS 的帖子，但是 none 到目前为止有帮助。

我尝试了普通的 XMLHttpRequest 和 JQuery，有和没有各种 headers，都没有用。普通的返回 status 代码 0，我认为这表明请求在某处被阻止。

有没有人有过 javascript CORS 的成功经验，无论是普通的还是 jquery？

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
    function callWebService() {
        var xmlhttp = new XMLHttpRequest(); 

        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4) {
                if (xmlhttp.status == 200) {
                    alert(xmlhttp.responseText);
                } else {
                    alert(xmlhttp.status);
                }
            }
        };
        xmlhttp.open("GET", "http://waterservices.usgs.gov/nwis/iv/?format=json&sites=01646500&parameterCd=00060", true);
        //xmlhttp.setRequestHeader("Accept","text/plain");
        xmlhttp.setRequestHeader("Access-Control-Allow-Headers", "x-requested-with, x-requested-by, Content-Type");
                xmlhttp.setRequestHeader("Access-Control-Allow-Origin", "*");
                xmlhttp.setRequestHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");
                xmlhttp.setRequestHeader("Access-Control-Max-Age", "604800");
        xmlhttp.setRequestHeader("X-Requested-With", "XMLHttpRequest");
        xmlhttp.send();
    }

    function callWebServiceWithJQuery() {
        $(document).ajaxError(
        function (event, jqXHR, ajaxSettings, thrownError) {
            alert('[event:' + objToString(event) + '], [jqXHR:' + objToString(jqXHR) + '], [ajaxSettings:' + objToString(ajaxSettings) + '], [thrownError:' + objToString(thrownError) + '])');
        });
        $.ajax({
            /*beforeSend: function (request) {
                request.setRequestHeader("Access-Control-Allow-Headers", "x-requested-with, x-requested-by, Content-Type");
                request.setRequestHeader("Access-Control-Allow-Origin", "*");
                request.setRequestHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");
                request.setRequestHeader("Access-Control-Max-Age", "604800");
            },*/
            url: "http://waterservices.usgs.gov/nwis/iv/?format=json&sites=01646500&parameterCd=00060",
            dataType:'json',
            data:'',

            success: function(response) {
                alert("succ");
                alert(response); 
            },
            error: function(a,b,c) {
                alert("err");
                alert(a); 
                alert(b); 
                alert(c); 
            }
        });
    }
</script>
</head>
<body>
<form>
<button onclick="callWebService();">Click me</button>
</form>

</body>
</html>

Answer 1

你有两个问题。

离开页面

您正在触发 Ajax 请求以响应单击提交按钮。

发送请求后，表单立即提交，您离开页面，这导致浏览器中止 Ajax 请求。

当您使用 onclick 属性时阻止表单提交的常用方法是 return false; 从它。现在我们已进入 21 世纪，但是，我敦促您了解 addEventListener 并从 onclick 继续前进。

发出 non-simple 请求

您正在设置一堆自定义请求 header。这些都需要浏览器发出 pre-flight OPTIONS request 以请求允许使用自定义 header 发出 cross-domain Ajax 请求。服务器不授予权限。不要设置自定义请求 headers.

X-Requested-With 是一个 non-standard（尽管很常见）黑客攻击，让服务器根据请求是否来自 Ajax 发送不同的内容（通常在 [=49 之间切换） =] 和一个 HTML 文档，更适合 Accept header)。这里不需要。不要设置它。

Access-Control-Allow-etc 是响应 header。您向其发出请求的服务器必须响应它们，以告知浏览器您的网站可以使用 Ajax 访问它。您不能在客户端上设置它们，一个站点授予自己访问其他站点的权限是荒谬的。不要尝试设置这些。

无法从 jquery 和纯 javascript 调用 CORS Web 服务

Failed to call CORS web service from jquery and plain javascript

javascript

jquery

ajax

cross-domain

cors

离开页面

发出 non-simple 请求