跨域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