httprequest 在“外部获取”上失败答案

【问题标题】：httprequest fails on "external get"httprequest 在“外部获取”上失败
【发布时间】：2012-07-11 09:47:13
【问题描述】：

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

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

我尝试制作一个 appcache 文件，并在 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(Advanced Rest Client) 响应：

{"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}

【问题讨论】：

标签： javascript ajax html httprequest

【解决方案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){ //do something });

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

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

希望这会有所帮助。

【讨论】：

而不是wiki链接，你可能知道一些“演练”的好例子吗？从imho那里学习要容易得多。 :)
同意，我已经为您添加了更多详细信息，如果您不确定，请大声喊...
泰铢。我认为我的服务器已经为 JSONP 设置好了。唯一的问题是 $.getJSON 不采用标头参数（afaik）。我也需要那个..
添加了相关回复
JSONP 将脚本标签添加到文档中，您无法将自定义请求标头设置为脚本标签 afaik...

【解决方案2】：

如果您使用的是 appcache 文件，请确保您在 NETWORK 部分明确说明您的 ajax get 的域。我不确定我们那里的 HTML5 浏览器中的实现是否不同，但在我的情况下，需要显式黑名单才能允许我向外部域发出请求。

另外值得注意的是“缓存”的请求，也就是未在网络部分明确指出的域失败并在 chrome develoepr 工具/网络中显示“待处理”状态。 Ajax 静默失败，在我的例子中，jQuery 没有触发错误处理程序。

【讨论】：