Кросс-доменный Ajax с Ext.Ajax.request - PullRequest
Новая
       30

Кросс-доменный Ajax с Ext.Ajax.request

4 голосов
/ 14 января 2012

Кажется, я не могу сделать междоменный вызов ajax с Ext.Ajax.request. Похоже, 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
              });

Я не могу видеть, что же отличается между ними.

Ответы [ 4 ]

4 голосов
/ 15 ноября 2012

Решение для Sencha Touch 2: Использование Ext.data.JsonP

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

2 голосов
/ 15 января 2012

Попробуйте использовать Ext.util.JSONP . Я не вижу способа сделать JSONP в документах, используя Ext.Ajax

1 голос
/ 14 января 2012

да, верно. Она называется Same Origin Policy - браузер не будет отправлять запросы ни в один домен, кроме того, откуда пришел javascript. Если вы управляете сервером, вы можете использовать CORS, чтобы сообщить браузеру о необходимости выполнения запросов. Если вы не управляете сервером, вам придется написать прокси на стороне сервера.

0 голосов
/ 31 июля 2014

У меня такая же проблема в Chrome из-за CORS (Cross-Origin Resource Sharing)

Браузер сначала отправит запрос ОПЦИИ, затем ожидайте получить некоторые HTTP-заголовки, которые указывают, какие источники разрешены.

Я решил эту проблему, выполнив некоторые настройки на стороне сервера И для серверной части Ruby, и для Node.js оба теперь работают хорошо.

Node.js (Благодаря эссе ) 

// 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);

Рубин (Благодаря эссе ) 

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
...