2014-01-16 133 views
1

基本kendo自动完成示例显示了通过Ajax请求获取匹配搜索结果的设置。如果请求的资源在同一个域上,ajax加载工作正常,但我想知道是否支持配置基础ajax请求来支持CORS。如果您直接使用$.ajax({}),有没有办法像您通常那样通过Ajax选项?配置Kendo发出的Ajax请求以支持跨域Ajax请求

$("#products").kendoAutoComplete({ 
         dataTextField: "ProductName", 
         filter: "contains", 
         minLength: 3, 
         dataSource: { 
          type: "odata", 
          serverFiltering: true, 
          serverPaging: true, 
          pageSize: 20, 
          transport: { 
           read: "http://demos.kendoui.com/service/Northwind.svc/Products" 
          } 
         } 
        }); 
       }); 

我基本上要在请求相同的粒度控制在常规的JQuery Ajax请求(例如波纹管):

jQuery.ajax({ 
       url: 'some url', 
       data: {id:id}, 
       contentType: 'application/json', 
       type: "Get", 
       xhrFields: { 
        withCredentials: true 
       }, 
       crossDomain: true 

      }) 
+0

如果域名不同,则需要在远程域上为客户端域提供'Access-Control-Allow-Origin'。这是关于安全 –

+0

我知道。该服务已配置为支持该服务。我只需要做一个支持CORS – TGH

+0

的ajax请求,你可以将访问令牌传递给你的头文件,并在服务器端检查。我正在使用nodejs开发宁静的登录系统。通信简单地完成访问令牌生成的用户名和密码 –

回答

3

的解决方案是将读取属性分配给包装了Ajax调用像这样的方法:

$("#search").kendoAutoComplete({ 
     dataTextField: "Name", 
     minLength: 1, 
     dataSource: { 
      type: "json", 
      serverFiltering: true, 
      transport: { 
       read: 
        function(options) { 
         $.ajax({ 
          url: "someUrl", 
          contentType: 'application/json', 
          data: { text: options.data.filter.filters[0].value }, 
          type: "Get", 
          xhrFields: { 
           withCredentials: true 
          }, 
          crossDomain: true, 
          success: function (result) { 
           options.success(result); 
          } 
         }); 
        } 
       } 
      } 
     } 
    }); 

这给你替换默认AJAX行为的能力。

3

可以在beforeSend方法设置用户;

$("#products").kendoAutoComplete({ 
     dataTextField: "ProductName", 
     filter: "contains", 
     minLength: 3, 
     dataSource: { 
      type: "odata", 
      serverFiltering: true, 
      serverPaging: true, 
      pageSize: 20, 
      transport: { 
       read: { 
        url: "http://demos.kendoui.com/service/Northwind.svc/Products", 
        type: 'POST', 
        beforeSend: function(req) { 
         req.setRequestHeader('Auth', your_token); 
        } 
       } 
      } 
     } 
    }); 
}); 
3

对于数据源定义,您可以通过将阅读器属性“xhrFields”的withCredentials设置为true来实现。

dataSource: { 
        transport: { 
         read: { 
          xhrFields: { 
           withCredentials: true 
          }, 
          url: serviceURL 
         } 
        } 
       } 

确保你已经设置SupportsCredentials在目标服务器上的CORS设置= TRUE
希望这会有所帮助