javascript - httprequest 在 "external get"上失败

Question

我正在尝试制作一个获取图像并将其存储到我的设备的网络应用程序。然后它需要使用图片作为到另一个页面的链接。

如果我在我的本地机器(网络服务)上尝试，我会成功。但是当我将 i 放入我的域时(相同的代码+使用高级休息客户端测试)然后它失败了。

我尝试制作一个应用程序缓存文件，并在 NETWORK 下写入 * 或我的域名:

这是我的 httprequest 代码(javascript):

var startUrl = "http://localhost:8080";

function getStuff(theUrl){
    startUrl = "http://mobilitycms.lector.dk:9090";
    alert(startUrl+theUrl);
    $(document).ready(function() {
        $.ajax({
            url: startUrl+theUrl,
            type: 'GET',
            dataType: 'json',
            success: function(data) {
                alert('success');
                createMainMenu(data);

                alert('new cursor created:' + cursor);
            /* $.each(data.list, function(i, object) {
                    alert(i+"="+object);
                    var array = new Array();
                    for (property in object) {
                        var value = object[property];
                        alert(property + "=" + value); 
                    }
                });*/
            },
            error: function() {
                alert('boo!');
            },
            beforeSend: setHeader
        });
    });
}

function setHeader(xhr) {
    xhr.setRequestHeader('app', '1');
}

html

    <div data-role="header">
            <a href="#" data-rel="back" data-role="button" ><img align="middle"src="images/back.png" alt="beskeder" vspace="2"/></a> 
            <h1><img onclick="getStuff('/product/5')" align="middle"src="images/main_header.png" alt="beskeder" vspace="2"/></h1>
    </div><!-- /header -->

    <div data-role="content" id="firstPageContent"> 
        <p>I'm first in the source order so I'm shown as the page.</p>      
        <p>View internal page called <a href="#second">second</a></p>
        <a href="#second" id="mapLink" name="mapLink"><img id="mapLinkImage" alt="a map which links to the mapPage" src="images/beskeder.png"/></a>
        <Button id="loadButton" onClick="load()"/>

    </div><!-- /content -->

</div><!-- /page -->

为什么会失败？

附言。如果有人对这种“webapp”有一些好的指南/模式，那么它也很受欢迎，因为我是这个 js/webapp 开发的新手。

我当前的 RAW(高级 Rest 客户端)响应:

{"data":null,"server":null,"list":[{"name":"Herre Briller","parent":-1,"id":1,"fileName":"men","childrenType":"GROUPS","sortOrder":0,"picture":"/content/picture/products/men","grCount":3,"prCount":0},{"name":"Dame Briller","parent":-1,"id":2,"fileName":"women","childrenType":"GROUPS","sortOrder":1,"picture":"/content/picture/products/women","grCount":3,"prCount":0},{"name":"Børne briller","parent":-1,"id":3,"fileName":"children","childrenType":"GROUPS","sortOrder":2,"picture":"/content/picture/products/children","grCount":1,"prCount":0}],"expires":7200000}

Answer 1

如果你想做跨域请求，你需要使用 JSONP .或者看看 CORS

如果一切都失败了，你也可以通过你的服务器代理请求......

对于 JSONP 和 CORS，您需要控制从中获取数据的远程服务器，因为您需要更改 JSONP 的响应格式或 CORS 允许域的白名单。

JSONP 实质上将一个额外的参数传递给通常称为“回调”的服务器，以便服务器可以将 JSON 响应包装在此回调函数中。

例如

请求:http://somedomain.com/get/user/data/?id=13&callback=someFunction

响应:someFunction({name:joe, lastname: soap});

如果您使用的是 jQuery，则无需告诉它您要使用的回调函数的名称，它将动态创建一个回调函数，您需要做的就是让 $.ajax 请求知道您要创建的回调函数使用 JSONP 的请求，它将非常透明地处理其余部分。甚至比使用 $.ajax 更简单(但可配置性更低)$.getJSON:

这是一个示例请求:

$.getJSON(baseUrl+'categories?callback=?',{uid:uuid,lat:lat,lng:lng}, function(data){
//做一点事
});

此请求将要发出一个普通的 JSON 请求，但由于您在 url 中包含了一个 callback=，它会自动将其转换为一个 JSOP 请求。

如果您无法访问远程服务器，那么我会说您需要通过您的服务器代理您的请求。如何设置取决于您使用的网络服务器。如果您使用的是 Apache，您可以查看 mod_proxy。

希望这对您有所帮助。

:D