[Phonegap+Sencha Touch] 移动开发49 js跨域请求的实现方法

如果是phonegap/cordova打包的，可以修改config.xml的access节点达到跨域的目的：

<access origin="*" />

如果是网站，可以有下面的实现方法：

一、使用代理

在你当前域中架设一个服务端B，通过这个服务端B去请求另一个域A。你的前台js请求服务端B

二、jsonp

这个大家都知道，实际上是将请求参数拼接到url上，通过GET请求的。受url长度的限制，请求参数的体积不能太大

jsonp的实质是一句js代码，而不是{开头、}结尾的字符串

三、修改web.config文件（Asp.Net）

整个应用都支持跨域的请求，需要部署到IIS中才能使用。

web.config：

<system.webServer>
  <httpProtocol>
    <customHeaders>
      <add name="Access-Control-Allow-Methods" value="OPTIONS,POST,GET"/>
      <add name="Access-Control-Allow-Headers" value="x-requested-with,content-type"/>
      <add name="Access-Control-Allow-Origin" value="*" />
    </customHeaders> 
  </httpProtocol>
</system.webServer>

jQuery代码：

$.ajax({ 
    url: "http://localhost/CROS/handler.ashx", 
    type: "POST",
    dataType: "json",
    success: function (data) { console.log(data); }
}); 

ExtJs / Sencha Touch代码：

Ext.Ajax.request({
    url: 'http://localhost/CROS/Handler.ashx',
    method: 'POST',
    success:function(resp){
        Ext.Msg.alert('success', resp.responseText);
    },
    failure:function(resp){
        Ext.Msg.alert('failure', resp.responseText);
    }
});

在II6中web.config不支持system.webServer配置节，所以需要在IIS中设置httprequestheader。

将web.config文件中的自定义头加入IIS的设置中。

四、在Response中设置Header

这是针对单个请求（以Asp.Net为例）

public class Handler : IHttpHandler
{ 
    public void ProcessRequest(HttpContext context)
    {
        #region 支持跨域请求
        context.Response.ClearHeaders();
        context.Response.AppendHeader("Access-Control-Allow-Origin", "*");
        context.Response.AppendHeader("Access-Control-Allow-Headers", "X-Requested-With, Content-Type");
        context.Response.AppendHeader("Access-Control-Allow-Methods", "GET, POST, OPTIONS");
        #endregion 
  
        context.Response.ContentType = "application/json";
        context.Response.Write("{a: 1, b: 2}");
    }
}

注意：

可以把所有的Allow-Headers都加上，防止某个请求失败： 

Access-Control-Allow-Headers: "Origin, No-Cache, X-Requested-With, If-Modified-Since, Pragma, Last-Modified, Cache-Control, Expires, Content-Type, X-E4M-With"