逆向工程使用 Ext.Ajax.request 的跨域 POST 请求

Posted

技术标签:

【中文标题】逆向工程使用 Ext.Ajax.request 的跨域 POST 请求【英文标题】:Reverse engeering cross domain POST requests which use Ext.Ajax.request 【发布时间】:2011-09-29 14:20:50 【问题描述】:

我正在使用一个脚本,该脚本似乎使用Ext.Ajax.request(使用 ExtJS 3)来发送跨域请求 - 其中一些是 POST 请求。正在考虑从 ExtJS3 移开(一般可能从 ExtJS 移开),但快速尝试使用 XMLHttpRequest 没有奏效;我怎样才能知道使用什么技术来发送这些跨域请求?

【问题讨论】:

【参考方案1】:

我目前正在使用 ExtJS 3.3.1,我还没有切换到 4,但很可能会在新项目出现时。无需查看 Ext 源代码,我可以告诉您他们正在使用 JSONP 来完成此任务,这是进行跨域 AJAX 调用的唯一方法,因为 javascript 必须遵守 same-origin policy。

您是否正在尝试对 JSONP 进行纯 JS 实现?还是您已经在使用 JS 库?

编辑

根据我们的 cmets... 他们正在发出 POST 请求。 JSONP 无法做到这一点。据我所知,他们正在使用 iframe 类似的诡计。这与在旧浏览器上用于“AJAX”上传文件的技巧相同。

This 链接更详细地解释了它。

此外,Valum's file uploader 中使用了相同的方法(iframe 到、POST、上传文件)。它比 ExtJS 源代码更容易理解。

【讨论】:

但是你可以使用 JSONP 发送 POST 请求吗?我正在查看 Firebug 中的网络活动,并且页面正在发送跨域 POST 请求 现在你让我好奇......我假设 JSONP 只能发送 GET 请求。我要去挖了。 没有详细阅读这篇文章...但是没有提到Ext.Ajax.request;它更多的是关于表单提交。不过,我会看看。【参考方案2】:

Ext JS 3.4 online documentation 将为您提供Ext.Ajax 类继承模型,可用于跟踪与Ext.Ajax.request 方法调用相关的源代码。但是,与其花费更多的时间和资源来重新创建***,我建议通过 proxy 配置选项将原生 Ext JS Ext.data.ScriptTagProxy 类实现到您现有的商店中,以方便您的跨域请求远程商店。下面是我所指内容的缩略示例。

示例

var myJsonStore = new Ext.data.JsonStore
(
    autoLoad : true,
    proxy : new Ext.data.ScriptTagProxy
    (
        url : 'http://www.cross-domain.com/file.php'
    ),
    fields : ['myIdColumn','myCharColumn','myDateColumn']
);

添加

因为您打算不再使用 Ext JS,请查看 ACD (AJAX Cross Domain) 库。

【讨论】:

但是我打算放弃使用 ExtJS...这不是建议继续使用 ExtJS 吗? 不一定。我试图建议您首先使用 Ext JS 3.4 在线文档查看Ext.Ajax 类继承模型及其底层request 方法逻辑。通过从那里开始并理解继承层次结构,您应该能够轻松地向上遍历树,识别和查看超类方法和负责促进跨域请求的逻辑。我的示例可能被误解了,但旨在暗示特定的 Ext.data.ScriptTagProxy 类,您可能会在其中找到所需的内容。 请查看我添加的提供跨域支持的非常简单和轻量级的 JavaScript AJAX 库。如果您打算编写一个本土解决方案,您可以使用库本身,或者源代码作为参考。【参考方案3】:

JSONP 有点小技巧,但可以使用。

但是,如果您控制跨域,请考虑使用 CORS。 CORS 涉及在来自网站的响应中放置一个标头(Access-Control-Allow-Origin):http://enable-cors.org/

IE 8+(带有警告,natch)、Firefox 和 WebKit 浏览器都支持它。 IE 警告是这样的:IE 对 CORS 请求使用不同的请求对象 (XDomainRequest)。如果您必须支持 Opera,则需要使用 JSONP 或 polyfill(类似于https://github.com/gimite/web-socket-js/,需要 Flash)。

如果您无法控制相关域,可以尝试让他们支持 CORS。

【讨论】:

【参考方案4】:

你可以尝试使用jsonp jQuery 示例:

$.ajax(
  url: "test.php",
  dataType: "jsonp"
  success: function(data)
     console.log(data)
  
);

或者,如果您有权访问请求的内容,则可以设置 Access-Control-Allow-Origin 标头。 PHP 示例:

header('Access-Control-Allow-Origin: '.$_SERVER['HTTP_ORIGIN']);

【讨论】:

以上是关于逆向工程使用 Ext.Ajax.request 的跨域 POST 请求的主要内容,如果未能解决你的问题,请参考以下文章

在 Chrome 中超时 Ext.Ajax.request 后未捕获的异常

Ext Js,Ext.Ajax.request 在移动设备上不起作用

ExtJS 4.2.1 模拟 Ext.Ajax.request

Ext.Ajax.Request 在浏览器中不起作用

Ext.Ajax.request和formPanel.getForm().submit()两种提交方法的异同:

Ext.Ajax.request 是不是有任何 response.status 代码列表?