使用 Ext.Ajax.request 的跨域 Ajax答案

【问题标题】：Cross Domain Ajax with Ext.Ajax.request使用 Ext.Ajax.request 的跨域 Ajax
【发布时间】：2012-02-10 09:43:59
【问题描述】：

看来我无法使用 Ext.Ajax.request 进行跨域 ajax 调用。看起来 ScriptTag: True 没有任何效果。

这是我的代码：

            {
            xtype: 'button',
            text: 'Search',
            ui: 'confirm',
            handler: function() {
                var query = Ext.getCmp("textquery").getValue();
                Ext.Ajax.request({
                    url: 'http://example.com/?search='+query,
                    dataType: 'jsonp',
                    jsonp: 'jsonp_callback',
                    scriptTag: true,
                    success: function(e) {
                        var obj = Ext.decode(e.responseText);
                        var msg = obj;
                        var html = tpl.apply(msg);
                        resultPanel.update(html);
                    }
                });
            }

控制台日志告诉我：

XMLHttpRequest cannot load http://example.com/?search=test&_dc=1326551713063. Origin http://myapp.lo is not allowed by Access-Control-Allow-Origin.

我用 jquery 做了同样的事情并且它有效，但我必须使用 sencha touch。

              var formData = $("#callAjaxForm").serialize();

              $.ajax({
                url:"http://example.com/leksikonapi/",
                dataType: 'jsonp',
                jsonp: 'jsonp_callback',
                data: formData,
                success: onSuccess,
                error: onError
              });

我看不出两者之间有什么不同。

【问题讨论】：

标签： ajax cross-domain sencha-touch jsonp

【解决方案1】：

Sencha Touch 2 的解决方案：使用Ext.data.JsonP

http://docs.sencha.com/touch/2-1/#!/api/Ext.data.JsonP

【讨论】：

【解决方案2】：

尝试使用Ext.util.JSONP。我没有看到使用 Ext.Ajax 在文档中执行 jsonp 的方法

【讨论】：

这是我所做的，而不是Ext.util.JSONP.request({ url: 'http://dev.brafolk.no/leksikonapi/', callbackKey: 'jsonp_callback', params: { search: query }, callback: function(data) { console.log(data.results); var msg = data.results; var html = tpl.apply(msg); resultPanel.update(html); console.log('SUCCESS'); } });

【解决方案3】：

是的，没错。它被称为Same Origin Policy——浏览器不会向任何域发出请求，除了来自 javascript 的域。如果您控制服务器，则可以使用 CORS 告诉浏览器发出请求。如果您不控制服务器，则必须编写服务器端代理。

【讨论】：

我确实拥有该域，并设法使用 jquery 做到这一点，如下所示：$.ajax({ url:"http://dev.brafolk.no/leksikonapi/", dataType: 'jsonp', jsonp: 'jsonp_callback', data: formData, success: onSuccess, error: onError }); 但我不想对 sencha-touch 做同样的事情

【解决方案4】：

由于 CORS（跨域资源共享），我在 Chrome 上遇到了同样的问题

浏览器会先发送一个OPTIONS请求，然后期望返回一些指示允许哪些来源的 HTTP 标头。

我已经通过在服务器端进行一些设置解决了这个问题对于 Ruby 和 Node.js 服务器端，现在都运行良好。

Node.js（感谢the essay）

// Enables CORS
var enableCORS = function(req, res, next) {
    res.header('Access-Control-Allow-Origin', '*');
    res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS');
    res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization, Content-Length, X-Requested-With');

    // intercept OPTIONS method
    if ('OPTIONS' == req.method) {
        res.send(200);
    }else{
        next();
    }
};
// enable CORS!
app.use(enableCORS);

Ruby（感谢essay）

class ApplicationController < ActionController::Base
  before_filter :cors_preflight_check
  after_filter :cors_set_access_control_headers

  # For all responses in this controller, return the CORS access control headers.

  def cors_set_access_control_headers
    headers['Access-Control-Allow-Origin'] = '*'
    headers['Access-Control-Allow-Methods'] = 'POST, GET, PUT, DELETE, OPTIONS'
    headers['Access-Control-Allow-Headers'] = 'Origin, Content-Type, Accept, Authorization, Token'
    headers['Access-Control-Max-Age'] = "1728000"
  end

  # If this is a preflight OPTIONS request, then short-circuit the
  # request, return only the necessary headers and return an empty
  # text/plain.
  def cors_preflight_check
    if request.method == 'OPTIONS'
      headers['Access-Control-Allow-Origin'] = '*'
      headers['Access-Control-Allow-Methods'] = 'POST, GET, PUT, DELETE, OPTIONS'
      headers['Access-Control-Allow-Headers'] = 'X-Requested-With, X-Prototype-Version, Token'
      headers['Access-Control-Max-Age'] = '1728000'

      render :text => '', :content_type => 'text/plain'
    end
  end
end

【讨论】：