跨域Ajax与Ext.Ajax.request

Question

看来我无法与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我也做了同样的事情，它的工作原理，但我必须使用煎茶触摸。

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

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

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

Answer 1

尝试使用Ext.util.JSONP。我没有看到一个办法做到在文档中使用JSONP Ext.Ajax的

Answer 2

是的，这是正确的。它被称为Same Origin Policy - 浏览器不会向JavaScript以外的任何域发出请求。如果您控制服务器，则可以使用CORS告诉浏览器发出请求。如果您不控制服务器，则必须编写一个服务器端代理。

Answer 3

解决方案煎茶触摸2：使用Ext.data.JsonP

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

Answer 4

我在Chrome同样的问题，由于CORS（跨-Origin资源共享）

浏览器将首先发送一个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); 

红宝石（感谢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