离开页面

Question

我正在尝试访问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>

Answer 1

你有两个问题。

离开页面

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

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

阻止表单在您使用onclick属性时提交的常用方法是return false;。现在我们处于21世纪，但是，我恳请您了解addEventListener并继续onclick。

发出非简单请求

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

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

Access-Control-Allow-etc是响应标头。您发出请求的服务器必须与他们一起回复，告诉浏览器您的站点可以使用Ajax来访问它。您无法在客户端上设置它们，站点授予自己访问其他站点的权限将是荒谬的。不要试图设置这些。

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

1 个答案:

离开页面

发出非简单请求