SOLVED! Re: [PhoneGap] Re: Ionic/Angular $http.post results in a 404, but only on an Android phone, not on an iPhone or in the browser

138 views
Skip to first unread message

Steve Sobol - Lobos Studios

unread,
Jul 29, 2015, 11:18:06 AM7/29/15
to jcesarmobile, phonegap, kerri...@gmail.com
SOLVED!!!!!

The proper way to handle XHR requests in an Ionic application is *this* way. Remember, Ionic incorporates AngularJS:

** Your index.html must have a Content-Security-Policy meta tag to make the browser AND the Cordova whitelist plugin happy (it was actually Cordova that threw an error when I temporarily removed it for testing purposes).

** It is also necessary to include the proper <access origin="whatever"> directives in config.xml, to make the Cordova whitelist plugin happy.

** You also must use the ng-csp attribute. This is a relatively new development. I've done Ionic apps in the past that have not required it. This disables certain behaviors of Angular that run afoul of your Content-Security-Policy. as stated in the Angular docs:

Angular has some features that can break certain CSP (Content Security Policy) rules.

If you intend to implement these rules then you must tell Angular not to use these features.

This is necessary when developing things like Google Chrome Extensions or Universal Windows Apps.

The following rules affect Angular:

  • unsafe-eval: this rule forbids apps to use eval or Function(string) generated functions (among other things). Angular makes use of this in the $parse service to provide a 30% increase in the speed of evaluating Angular expressions.

  • unsafe-inline: this rule forbids apps from inject custom styles into the document. Angular makes use of this to include some CSS rules (e.g. ngCloak and ngHide). To make these directives work when a CSP rule is blocking inline styles, you must link to theangular-csp.css in your HTML manually.

If you do not provide ngCsp then Angular tries to autodetect if CSP is blocking unsafe-eval and automatically deactivates this feature in the $parse service. This autodetection, however, triggers a CSP error to be logged in the console:

 
Old, broken index.html:

<body class="greenroom" ng-app="greenroom">
 
Working index.html:

<body class="greenroom" ng-csp ng-app="greenroom">
 
Incidentally, using Crosswalk instead of the system web view wouldn't have helped; I found the solution in an Ionic forum post where someone was having the same problem with Crosswalk. :)






Steve Sobol - Lobos Studios wrote:
Only if you didn't carefully read what I said. ;)

The web view throws an error if the CSP is set too restrictively. That is behavior that I expect and want to see.

The problem is this: Upon seeing the error, I change the CSP to allow the XHR. When I do that, THAT is when I get the 404 error and nothing in the logs or Chrome's Javascript console to indicate why.

Not on iOS, not on my computer, not on Android when I use "ionic serve" and use Google Chrome on the device. ONLY in the app on Android. Exact same behavior with my Samsung Galaxy Tab 4 tablet and my HTC Droid DNA, both running Android 4.something  (4.4.2 for sure on the tablet, 4.2.something on the phone.)

And so far, I've gotten a lot of good advice here and in the Ionic forum, but no solutions yet.




jcesarmobile wrote:
"the content is blocked based on the page's policy", seems like an issue with the CSP

El lunes, 27 de julio de 2015, 0:39:09 (UTC+2), Steve Sobol escribió:
Bare XHR gives me the same result.

I have no whitelist directives in my config.xml; I am using only the CSP meta tag. If I tighten the settings too far, and I pull up the app and look at the console in the Chrome developer tools, I can see the messages that the content is blocked based on the page's policy. If I loosen the settings up, no error,just a 404.

It's either ionicor cordova.

Steve Sobol - Lobos Studios wrote:
ionic --version says 1.6.1, which is weird. Maybe that's the CLI version; the framework itself is only on 1.0.1.

Direct links don't work. I haven't rolled my own XHR.

It works in Google Chrome on the tablet, though, when I use "ionic serve".

Kerri Shotts wrote:
Hey Steve --

What version of Angular/Ionic are you using? I did a cursory Google search, and some older versions are returning spurious 404s when the actual status is a zero and no response is generated. 

Have you tried making your own XHR call to rule out issues with Angular/Ionic? What response do you get with direct links? Is it the same 404 or something else?



--
Lobos Studios - Website and Mobile App Design & Development; IT Support; Computer Maintenance
Toll Free  877.919.4WEB - Apple Valley 760.684.8859 - Los Angeles 310.945.2410 - Cleveland 216.242.4010
www.LobosStudios.com * www.facebook.com/LobosStudios * @LobosStudios


--
Lobos Studios - Website and Mobile App Design & Development; IT Support; Computer Maintenance
Toll Free  877.919.4WEB - Apple Valley 760.684.8859 - Los Angeles 310.945.2410 - Cleveland 216.242.4010
www.LobosStudios.com * www.facebook.com/LobosStudios * @LobosStudios


--
Lobos Studios - Website and Mobile App Design & Development; IT Support; Computer Maintenance
Toll Free  877.919.4WEB - Apple Valley 760.684.8859 - Los Angeles 310.945.2410 - Cleveland 216.242.4010
www.LobosStudios.com * www.facebook.com/LobosStudios * @LobosStudios


--
Lobos Studios - Website and Mobile App Design & Development; IT Support; Computer Maintenance
Toll Free  877.919.4WEB - Apple Valley 760.684.8859 - Los Angeles 310.945.2410 - Cleveland 216.242.4010
www.LobosStudios.com * www.facebook.com/LobosStudios * @LobosStudios

Steve Sobol - Lobos Studios

unread,
Jul 29, 2015, 11:22:25 AM7/29/15
to jcesarmobile, phonegap, kerri...@gmail.com

Kerri Shotts

unread,
Aug 1, 2015, 4:17:45 PM8/1/15
to phonegap, jcesar...@gmail.com, kerri...@gmail.com
Sheesh! I'd never have guessed (not being an Angular person...)

Glad you got it figured out! Happy dance time!

Steve Sobol - Lobos Studios

unread,
Aug 1, 2015, 4:53:46 PM8/1/15
to phon...@googlegroups.com, jcesar...@gmail.com, kerri...@gmail.com
I AM an MVC guy, I love both server-side MVC frameworks *AND* client-side frameworks, I think Angular is awesome and it still took me a lot of time to figure out the answer. LOL

Kerri Shotts wrote:
--
-- You received this message because you are subscribed to the Google
Groups "phonegap" group.
To post to this group, send email to phon...@googlegroups.com
To unsubscribe from this group, send email to
phonegap+u...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/phonegap?hl=en?hl=en
 
For more info on PhoneGap or to download the code go to www.phonegap.com
---
You received this message because you are subscribed to the Google Groups "phonegap" group.
To unsubscribe from this group and stop receiving emails from it, send an email to phonegap+u...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
Reply all
Reply to author
Forward
0 new messages