ionic 跨域访问

ionic使用chrome调试的时候，经常会出现Access-Control-Allow-Origin的问题，说明就是跨域访问的问题。
那么什么是跨域访问呢？
浏览器在全局层面禁止了页面加载或执行与自身来源不同的域的任何脚本

URL	说明	是否允许通信
http://www.a.com/a.js http://www.a.com/b.js	同一域名下	允许
http://www.a.com/lab/a.js http://www.a.com/script/b.js	同一域名下不同文件夹	允许
http://www.a.com:8000/a.js http://www.a.com/b.js	同一域名，不同端口	不允许
http://www.a.com/a.js https://www.a.com/b.js	同一域名，不同协议	不允许
http://www.a.com/a.js http://70.32.92.74/b.js	域名和域名对应ip	不允许
http://www.a.com/a.js http://script.a.com/b.js	主域相同，子域不同	不允许
http://www.a.com/a.js http://a.com/b.js	同一域名，不同二级域名	不允许（cookie这种情况下也不允许访问）
http://www.cnblogs.com/a.js http://www.a.com/b.js	不同域名	不允许

以上表格来源于什么是跨域
js同源策略
出于安全考虑，Js代码在一个沙箱环境中运行，虽然Web应用程序能够从任何地方加载js代码，但所有的代码必须将其通信限制到该Web应用程序所在的宿主服务器。这种限制被称为同源策略。
Ari Lerner著的《Angularjs权威教程》中介绍有三种方式JSONP、CORS、服务器代理。
JSONP本质上还是GET方式，针对post的方式就无能为力了。服务器代理需要服务端的额外支持，也很费劲。所以采用CORS方式最后灵活。
1 CORS
跨域资源共享（Cross Origin Resouce Sharing，CORS），CORS规范简单地扩展了标准的XHR对象，以允许JavaScript发送跨域的XHR请求，他会通过预检查（preflight）来确认是否有权限向目标服务器发送请求。
2 ionic端的配置
在ionic配置增加以下CORS配置

$httpProvider.defaults.useXDomain = true;
delete $httpProvider.defaults.headers.common['X-Requested-With'];
$httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

3 pom配置
我使用thetransactioncompany开源的CORS过滤实现跨域访问。

<dependency>
    <groupId>com.thetransactioncompany</groupId>
    <artifactId>cors-filter</artifactId>
    <version>2.4</version>
</dependency>

4 Web.xml配置
注意filter-mapping中/rest/*，这个url过滤规则可以自己定义，我这里因为app端向后台请求的提供的rest接口

<!-- CORS配置 -->
    <filter>
        <filter-name>CORS</filter-name>
        <filter-class>com.thetransactioncompany.cors.CORSFilter</filter-class>
        <init-param>
            <param-name>cors.allowOrigin</param-name>
            <param-value>*</param-value>
        </init-param>
        <init-param>
            <param-name>cors.supportedMethods</param-name>
            <param-value>GET, POST, HEAD, PUT, DELETE</param-value>
        </init-param>
        <init-param>
            <param-name>cors.supportedHeaders</param-name>
            <param-value>Accept, Origin, X-Requested-With, Content-Type, Last-Modified</param-value>
        </init-param>
        <init-param>
            <param-name>cors.exposedHeaders</param-name>
            <param-value>Set-Cookie</param-value>
        </init-param>
        <init-param>
            <param-name>cors.supportsCredentials</param-name>
            <param-value>true</param-value>
        </init-param>
    </filter>
    <filter-mapping>
        <filter-name>CORS</filter-name>
        <url-pattern>/rest/*</url-pattern>
    </filter-mapping>