【问题标题】：Failed to call CORS web service from jquery and plain javascript无法从 jquery 和纯 javascript 调用 CORS Web 服务
【发布时间】：2015-05-05 16:11:44
【问题描述】：

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

我尝试了普通的XMLHttpRequest 和JQuery，有和没有各种标题，没有任何效果。普通的返回 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>

【问题讨论】：

您不必设置任何标题。服务器这样做。向我们提供来自包含这些标头的服务器的响应标头，以便我们确认您是否遵循所述服务器设置的 CORS 政策。
@KevinB，感谢您的回复，下面昆汀的回答解决了这个问题。显然，您对标题是正确的。对我来说，关键是 return false。再次感谢！

标签： javascript jquery ajax cross-domain cors

【解决方案1】：

你有两个问题。

离开页面

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

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

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

发出非简单请求

您正在设置一堆自定义请求标头。这些都要求浏览器发出pre-flight OPTIONS request 以请求允许使用自定义标头发出跨域Ajax 请求。服务器不授予该权限。不要设置自定义请求标头。

X-Requested-With 是一种非标准（尽管很常见）的 hack，它让服务器根据请求是否来自 Ajax 发送不同的内容（通常在 JSON 和 HTML 文档之间切换，更适合 @987654328 @标头）。这里不需要。不要设置它。

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

【讨论】：

使用最新的jquery，一切都很好，但是我的drupal网站使用jquery 1.3.4（我无法更改），jquery不是发送get，而是发送一个选项请求......任何方式强制获取？
这又是一次预检。弄清楚 jQuery 1.3（它是古老的，真的不应该用于新的开发）使它成为一个不简单的请求，然后修复它。