Cross-domain Problem of ionic

Source: Internet
Author: User

Cross-domain everyone is not unfamiliar, but recently have encountered a pit, but also their own Ajax and angular not in-depth caused, so record a pen, next encounter bypass.

Reference: Http://ionichina.com/topic/54f051698cbbaa7a56a49f98, this is written very clearly, through the Ionic CLI Proxy Server to achieve cross-domain, using gulp to build, but I tried to invalid, Do not know whether it is with my data are post-related, many online data are used Jsonp, but Jsonp seems to be unable to post, because the backend is. NET MVC, the parameters are used to receive the entity class, so it is difficult to change to rest API, followed by the problem of cross-domain, Here are a few notes:

Originally with vs2015 development ionic + Cordova, itself is also integrated Cordova, the direct start in the Ripple simulator can set the local agent, so to avoid cross-domain, but I want to get rid of VS, because it is not possible to do the front-end to install a VS, too large, and vs to do the words environment is not very good to build, and that Node_modules directory hierarchy does not know why so deep, copy can not copy, in a word, all kinds of problems, reference is too little, or with a pure front-end to deal with it, although vs development has many advantages, such as Remotebuild iOS and so on.

Goole plug-in: Allow-control-allow-origin: * Also installed, I do not know why not cross-domain, probably because of the post reason.

After the follow-up debugging, found in fact already cross-domain, but prompt options .... such as the request, 404 of the problem, and then added in the backend with the same name as the Post method of the Httpoptions method, you can also do not write [httpoptions] feature, so the debug discovery will request two times, the first time will go into this httpoptions method, The original is to pre-test first, how to remove this pre-test, after the discovery to add $httpprovider.defaults.headers.post[' content-type '] = ' application/ X-www-form-urlencoded;charset=utf-8 '; this sentence, and then found not two times the request, the previous addition of the empty method can also be deleted. But also found that the parameters are not passed, the parameters of the background action entity object values are empty, and then continue to troubleshoot, found that the parameters are submitted to the Request.Form, and then know the parameters submitted over the two ways: form data and Request.payload, This will require the conversion of form data into Request.payload, the final solution is to refer to:

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

It's settled.

Finally found the upgrade ionic1.7.14 after $ionicview.enter This event is invalid, still do not know the reason ....

Ultimately, the solution to implementing Ionic's post cross-domain, without using proxies and JSONP, is as follows:

1.asp.net MVC service-side configuration:

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

2. Client index.html page Configuration

<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. Client App.js Configuration

$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}*/                varparam =function (obj) {varquery ="', name, value, Fullsubname, SubName, Subvalue, innerobj, I;  for(Nameinchobj) {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(SubNameinchvalue) {Subvalue=Value[subname]; Fullsubname= name +'['+ SubName +']'; Innerobj= {}; Innerobj[fullsubname]=Subvalue; Query+ = param (innerobj) +'&'; }                        } Else if(Value!== undefined && value!==NULL) Query+ = encodeURIComponent (name) +'='+ encodeURIComponent (value) +'&'; }                    returnQuery.length? QUERY.SUBSTR (0, Query.length-1): query;                }; //Override $http Service ' s default transformrequest$httpProvider. Defaults.transformrequest =[function (data) {returnAngular.isobject (data) && String (data)!=='[Object File]'?param (data): data; }];

4. Paste the Loginservice.js code again

login:function (user) {                var deferred = $q. defer ();                 var url = commconfig.domain + ' xxx '                $http. Post (URL, user)                . Success (function (data) {                     // Business Processing                     deferred.resolve (data);                }). Error (function (Error) {                    // Business process                     deferred.reject (Error);                });                 return deferred.promise;            },

Cross-domain Problem of ionic

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.