Ionic的跨域问题

跨域大家都不陌生，但最近一直遇到一个坑，也是自身对ajax和angular的不深入造成，所以记录一笔，下次遇到绕过。

参考过：http://ionichina.com/topic/54f051698cbbaa7a56a49f98，这上面写的很清楚，通过Ionic CLI代理服务器来实现跨域，使用gulp来构建，但我尝试过无效，不知道是否是跟我数据都是post相关，网上很多资料都用jsonp,但jsonp好像也无法post，因为后端是.net mvc,参数都是用实体类来接收，所以要改成rest api比较麻烦，后面一直研究跨域的问题，这里有几点说明：

本来是用vs2015开发ionic + cordova,本身也集成了cordova,直接启动在ripple模拟器里可以设置local的代理，这样就避免了跨域，但奈何想脱离vs,因为没可能让做前端的还要装个vs，太庞大了，而且vs来做的话环境不是很好搭建，而且那个node_modules目录层次结构不知道为什么那么深，拷贝都拷贝不了，总而言之，各种问题，参考资料又太少，还是用纯前端来处理吧，虽然vs开发也有很多优点，比如remotebuild ios等等。

goole 的插件：Allow-Control-Allow-Origin: *也安装了，不知为何也不能跨域，可能是因为post的原因。

后面跟踪调试，发现其实已经跨域了的，但提示Options....之类的请求，404的问题，然后在后端增加了一个和post方法同名的HttpOptions的方法，也可以不写[HttpOptions]特性，这样的话调试发现会请求两次，第一次会进这个HttpOptions方法，原来是要先进行预检测，怎样去掉这个预检测呢，后面发现要加上$httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=utf-8';这句，然后发现不会两次请求了，之前加的那个空方法也可以删了。但又发现参数都没有传递过来，后台Action的参数实体对象的值都为空，后面又继续排查，发现参数都提交到request.form里了，然后就知道了参数提交过来的两种方式：form data和request.payload,这样就需要将form data转换成request.payload，最终的解决办法是参考：

http://victorblog.com/2012/12/20/make-angularjs-http-service-behave-like-jquery-ajax/

就解决了。

最终发现升级ionic1.7.14后$ionicView.enter这个事件无效了，还不知道原因....

 

最终要说的是，实现ionic 的post跨域，不使用代理和jsonp的方式的解决办法如下：

1.asp.net mvc服务端配置：

 <httpProtocol>
      <customHeaders>
        <add name="Access-Control-Allow-Origin" value="*" />
        <add name="Access-Control-Allow-Headers" value="Origin, X-Requested-With, Content-Type, Accept" />
        <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />
      </customHeaders>
    </httpProtocol>

2.客户端index.html页面配置

<meta http-equiv="Content-Security-Policy" content="script-src * 'unsafe-eval'; connect-src * 'unsafe-eval';object-src 'self'; style-src * 'unsafe-inline'; img-src *">

3.客户端app.js配置

$httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=utf-8';
                /**
                 * The workhorse; converts an object to x-www-form-urlencoded serialization.
                 * @param {Object} obj
                 * @return {String}
                 */
                var param = function(obj) {
                    var query = '',
                        name, value, fullSubName, subName, subValue, innerObj, i;

                    for (name in obj) {
                        value = obj[name];

                        if (value instanceof Array) {
                            for (i = 0; i < value.length; ++i) {
                                subValue = value[i];
                                fullSubName = name + '[' + i + ']';
                                innerObj = {};
                                innerObj[fullSubName] = subValue;
                                query += param(innerObj) + '&';
                            }
                        } else if (value instanceof Object) {
                            for (subName in value) {
                                subValue = value[subName];
                                fullSubName = name + '[' + subName + ']';
                                innerObj = {};
                                innerObj[fullSubName] = subValue;
                                query += param(innerObj) + '&';
                            }
                        } else if (value !== undefined && value !== null)
                            query += encodeURIComponent(name) + '=' + encodeURIComponent(value) + '&';
                    }

                    return query.length ? query.substr(0, query.length - 1) : query;
                };

                // Override $http service's default transformRequest
                $httpProvider.defaults.transformRequest = [function(data) {
                    return angular.isObject(data) && String(data) !== '[object File]' ? param(data) : data;
                }];

4.再贴一下LoginService.js的代码

login: function (user) {
                var deferred = $q.defer();
                var url = commConfig.domain + ‘xxx’
                $http.post(url, user)
                .success(function (data) {
                    //业务处理
                    deferred.resolve(data);
                }).error(function (error) {
                    //业务处理
                    deferred.reject(error);
                });

                return deferred.promise;
            },