CODEWITHSUNDEEP
ajaxcross-domainsencha-touchjsonp
Spoeken
Spoeken

Reputation: 2598

Cross Domain Ajax with Ext.Ajax.request

It seems I can't make a cross domain ajax call with Ext.Ajax.request. It looks like ScriptTag: True doesn't have any 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 have done the same thing and it works, but I have to use sencha touch.

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

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

I can't see whats so different between the two.

Upvotes: 4

Views: 14128

Answers (4)

pohchen
pohchen

Reputation: 1823

I got the same problem on Chrome due to CORS (Cross-Origin Resource Sharing)

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

I've resolved this problem by doing some settings on server side For both Ruby and Node.js server side, both working well now.

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 to the 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

Upvotes: 0

Martin Bories
Martin Bories

Reputation: 1117

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

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

Upvotes: 4

Jason Freitas
Jason Freitas

Reputation: 1585

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

Upvotes: 2

hvgotcodes
hvgotcodes

Reputation: 120308

yes that's right. It's called the Same Origin Policy -- the browser won't make a request to any domain other than the one from whence the javascript came. If you control the server, you can use CORS to tell the browser to make requests. If you don't control the server, you'll have to write a server side proxy.

Upvotes: 1

Related Questions