1

jQueryMobileアプリケーションから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>
4

1 に答える 1

0

サーバーにヘッダー「Access-Control-Allow-Origin：*」を応答に追加するように依頼することで、この問題を解決しました。Java EEを使用している場合、解決策は次のコード行を追加することです。

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

ここで、responseはHttpServletResponseのインスタンスです。

于 2014-03-07T07:00:30.457 に答える