Question

我正在尝试从jQuery Mobile应用程序进行Ajax调用。目标服务器正确地提供呼叫。但是，浏览器会拒绝回复。

Firefox说：

x: [object Object], m: error, e: [Exception... "Component returned failure
code: 0x80004005 (NS_ERROR_FAILURE)"  nsresult: "0x80004005 (NS_ERROR_FAILURE)"
location: "JS frame :: file:///path/to/my/page/resources/js/jquery/jquery-1.7.1.min.js
:: <TOP_LEVEL> :: line 4"  data: no]

Chrome说：

x: [object Object], m: error, e: Error: NETWORK_ERR: XMLHttpRequest Exception 101
Origin null is not allowed by Access-Control-Allow-Origin.

我的理解是此错误与跨域调用问题相关联。我已经完成了我在jQuery和jQueryMobile文档中找到的所有内容，但没有运气。

我的页面是

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Main Page</title>

    <link rel="stylesheet" href="./resources/css/jquery/jquery.mobile-1.1.1.min.css" />

    <script src="./resources/js/jquery/jquery-1.7.1.min.js"></script>
    <script type="text/javascript">
    jQuery(document).live("mobileinit", function(){
        jQuery.support.cors = true ;
        jQuery.mobile.allowCrossDomainPages = true ;
    });
    </script>
    <script src="./resources/js/jquery/jquery.mobile-1.1.1.min.js"></script>

    <script type="text/javascript">
    function send() {
        // the request
        jQuery.ajax({
            async:          false,
            contentType:    "application/x-www-form-urlencoded; charset=UTF-8",
            crossDomain:    true,
            data:           {data: "abcd"} ,
            dataType:       "text", 
            error:          function(x, m, e) {
                alert("x: " + x + ", m: " + m + ", e: " + e);
            },
            processData:    true,
            success:        function(data){
                alert("Received: " + data);
            },
            type:           "GET",
            url:            "http://my/servlet/url"
        });
    }
    </script>
</head>

<body>
    <div id="page1" data-role="page">
        <div data-role="header" data-position="fixed">
            <h1>Login</h1>
        </div>

        <div data-role="content">
            <a id="btn1" data-role="button" onclick="send();" >Go!!!</a>
        </div>
    </div>
</body>
</html>

Answer 1

我已经通过要求服务器将标题“Access-Control-Allow-Origin：*”附加到响应来解决了这个问题。对于使用Java EE的人来说，解决方案是添加以下代码：

response.addHeader("Access-Control-Allow-Origin", "*");

其中response是HttpServletResponse的一个实例。

从jQueryMobile应用程序启动Ajax调用

1 个答案: