Ajax Cross Domain with Ext.Ajax.request

Question

It seems I can not cross domain ajax call with Ext.Ajax.request. ScriptTag: True seems to have no effect.

Here is my code:

{ 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); } }); } 

The console log tells me:

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

With jquery I did the same and it works, but I have to use touch sencha.

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

I do not see that between these two different.

Answer 1

Try using Ext.util.JSONP . I don't see a way to do jsonp in documents using Ext.Ajax

Answer 2

Solution for Sencha Touch 2: use Ext.data.JsonP

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

Answer 3

Yes this is correct. He called the "Policy of the same origin" - the browser will not request a single domain, except for where javascript came from. If you are managing a server, you can use CORS to inform the browser about the execution of requests. If you do not control the server, you will have to write a proxy server on the server side.

Answer 4

I have the same issue in Chrome due to CORS (Cross-Origin resource sharing)

The browser will first send an OPTIONS request, then expect to return some HTTP headers that indicate which are allowed.

I solved this problem by doing some server-side settings. For both sides, Ruby and Node.js both work well.

Node.js (Thanks to 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 (thanks 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