1

我正在使用 JSON 数据开发现代 webapp。我发现了以下关于使用名为 Fiddler 的工具来模拟 JSON 数据的博客文章。

我正在使用 Notepad++ 进行本地开发，并且主要在 Chrome 上进行测试（我最终将专注于更多浏览器）。我有一个主 HTML 文件“index.html”，我使用的文件结构如下所示：

index.html

    assets

        /js

        /css

        /img

我通常通过从 Notepad++ 在 Chrome 中启动 index.html 文件来运行我的测试。但是，因为我想使用 Fiddler 的 JSON “欺骗”功能，我遇到了跨域策略限制。我让 Fiddler 的自动回复工具匹配给定的 URI（此处为http://server.anywhere.com/test），然后返回在文件中预制的 JSON 响应。

XMLHttpRequest 无法加载http://server.anywhere.com/test。Access-Control-Allow-Origin 不允许 Origin null。

代码非常简单（jQuery 1.9.1）：

$(document).ready(function(){
    $.getJSON("http://server.anywhere.com/test", function(data) {
        $.each( data, function( i, item ) {
            console.log('Item number: ', i);
        });
    });
});

有一个更好的方法吗？也许是 Chrome 中的开发工具？

谢谢！

4

4 回答 4

5

您不需要另一个网络服务器，您可以使用 Fiddler 的 AutoResponder 完成所有工作。只需编辑有问题的规则，即可获得Access-Control-Allow-Origin包含请求站点来源值的响应标头。

如果您需要执行“非简单”（CORS 术语）请求，请添加如下规则：

Method:OPTIONS PartialTargetURL采取行动*CORSPreflightAllow

到规则列表，在返回目标响应的规则之前。此规则将使 Fiddler 对 XMLHttpRequest 对象发送的预检请求做出肯定响应。

于 2013-10-08T21:51:24.313 回答
0

坏消息是 Chrome 和 Firefox 出于安全原因不允许跨域调用。

选项 1：使用 AJAX 调用本地 PHP 文件，并在该文件中使用“fopen”获取数据。（如果您的 Web 应用程序在服务器上运行，则使用）

选项 2：Safari 和移动设备将允许您通过此请求获取数据（如果您的 Web 应用程序完全在客户端运行，请使用）

    $.ajax({
     url: ('www.sitewherejsonis.com/data.json'),
     type: 'GET',
     dataType: 'json',
     beforeSend: function(xhr) {
     xhr.setRequestHeader("Authorization", "Base 64"; // if you need to authentificate
     },

     success: function (data, textStatus, xhr) {
       // do something
      }
     error: function(xhr, exception) {
     // catch error
     }
     });
于 2013-10-08T14:26:07.700 回答
0

我能够得到这个工作。我最终通过命令行使用 SimpleHTTPServer 来启动程序。然后我将浏览器指向 localhost:8000，一切正常。使用 Fiddler2 和谷歌浏览器。

于 2013-10-08T19:46:25.477 回答
0

正如在另一个线程中发布的那样：

试试这个 - https://api.allowallorigin.com/restapi?url=www.sitewherejsonis.com/data.json

在尝试了多个选项后，我创建了这个解决方案。同一行的另一个解决方案可以完成这项工作，但会更改 JSON 数据位置，直到有人为此付费。上述服务是免费的，并将继续保持免费。如果人们觉得它有用，那么我可能会放置一个主页和一些谷歌广告，否则它应该在可预见的未来继续保持免费。

示例代码：

    jPath.prototype.loadJSONDataFromUrl = function(_url, callback) {
    $.getJSON(_url, function(data) {
        $.fn.jsonData = JSON.stringify(data);
    }).done(function(json){
        if( callback != null) {
            callback();
        }
    }).fail(function(){
        $.getJSON('https://api.allowallorigin.com/allorigin/restapi?url='+_url, function(data) {
            console.log(data);
            console.log(JSON.stringify(data));
            $.fn.jsonData = JSON.stringify(data);
        }).done(function(json){
            if( callback != null) {
                callback();
            }
        });
    });
}
于 2017-07-23T15:17:28.350 回答