跨源策略和Fiddler JSON调试

hof1towb  于 2023-01-27  发布在  其他
关注(0)|答案(5)|浏览(133)

我正在开发一个使用JSON数据的现代Web应用程序。我发现following blog post是关于使用一个名为Fiddler的工具来模拟JSON数据的。
我正在使用Notepad ++进行本地开发,主要在Chrome上进行测试(我最终会关注更多的浏览器)。我有一个主HTML文件"index.html",我使用的文件结构如下所示:

index.html

    assets

        /js

        /css

        /img

我通常通过从记事本++启动Chrome中的index.html文件来运行测试。但是,因为我想使用Fiddler的JSON "欺骗"功能,所以我遇到了跨源策略限制。我让Fiddler的自动应答器工具匹配给定的URI(这里是http://server.anywhere.com/test),然后返回一个预先制作在文件中的JSON响应。

这段代码非常简单(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中的开发工具?
谢谢!

8yoxcaq7

8yoxcaq71#

你不需要另一个网络服务器,你可以用Fiddler的AutoResponder来完成这一切。只需编辑规则,使其具有Access-Control-Allow-Origin响应头,其中包含请求网站的源值。
如果需要执行“非简单”(CORS术语)请求,请添加如下规则:
作用于*CORSPreflightAllowMethod:OPTIONS PartialTargetURL
添加到规则列表中,在返回目标响应的规则 * 之前 *。此规则将使Fiddler对XMLHttpRequest对象发送的印前检查请求做出肯定响应。

zxlwwiss

zxlwwiss2#

坏消息是,出于安全原因,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
     }
     });
ddarikpa

ddarikpa3#

我能够让这个工作。我最终通过命令行使用SimpleHTTPServer启动程序。然后我将浏览器指向localhost:8000,一切都很好。使用Fiddler2和谷歌Chrome。

xwbd5t1u

xwbd5t1u4#

正如在另一个线程张贴:
试试这个-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();
            }
        });
    });
}
k10s72fa

k10s72fa5#

Install Fiddler2
Enable Tools > Fiddler Options > HTTPS > Decrypt HTTPS traffic and install the local Root Cert
Go to Rules > Customize Rules... or edit the CustomRules.js file in %USERPROFILE%/Documents/Fiddler2/Scripts or similar

Add the following near the top, next to the other RulesOption declarations:

public static RulesOption("Force CORS")
var m_ForceCORS: boolean = true;

Add the following at the end of the OnBeforeRequest method:

// If it's an OPTIONS request, fake the response and return w/e the client expects.
// NOTE: Methods and Headers are hardcoded. Modify as needed.

if (m_ForceCORS && oSession.oRequest.headers.HTTPMethod == "OPTIONS") { 
    oSession.utilCreateResponseAndBypassServer();
    
    oSession.oResponse.headers.Add("Access-Control-Allow-Origin", oSession.oRequest.headers["Origin"]) ;
    oSession.oResponse.headers.Add("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");          
    oSession.oResponse.headers.Add("Access-Control-Allow-Headers", "Content-Type, Authorization, Accept, Csrf-Token, X-Requested-With, cloudSession, WbeSession, Cookie");
    oSession.oResponse.headers.Add("Access-Control-Max-Age", "1728000");
    oSession.oResponse.headers.Add("Access-Control-Allow-Credentials", "true");
    
    oSession.responseCode = 200;
}

Add the following at the end of the OnBeforeResponse method:

// Also add the headers to any real response with an "Origin:" header set

// Again, everything is hardcoded. Modify as needed.

// You could also .Remove() the header and .Add("$header_name", oSession.oRequest.headers["$header_name"])

// to mirrors the values given in the request.

if (m_ForceCORS && oSession.oRequest.headers.Exists("Origin")) 
{
    oSession.oResponse.headers.Remove("Access-Control-Allow-Origin");
    oSession.oResponse.headers.Add("Access-Control-Allow-Origin", oSession.oRequest.headers["Origin"]) ;
    
    oSession.oResponse.headers.Remove("Access-Control-Allow-Methods");
    oSession.oResponse.headers.Add("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");
    
    oSession.oResponse.headers.Remove("Access-Control-Allow-Headers"); 
    oSession.oResponse.headers.Add("Access-Control-Allow-Headers", "Content-Type, Authorization, Accept, Csrf-Token, X-Requested-With, cloudSession, WbeSession, Cookie");
    
    oSession.oResponse.headers.Remove("Access-Control-Max-Age");
    oSession.oResponse.headers.Add("Access-Control-Max-Age", "1728000");
    
    oSession.oResponse.headers.Remove("Access-Control-Allow-Credentials");
    oSession.oResponse.headers.Add("Access-Control-Allow-Credentials", "true");
     
    // if (oSession.oRequest.headers.Exists("Cookie")) {
        // oSession.oResponse.headers.Remove("Set-Cookie");
        // oSession.oResponse.headers.Add("Set-Cookie", oSession.oRequest.headers["Cookie"]);
    // }
}

相关问题