Ionic on iOS not sending request to external Api - angularjs

I have custom api written in WebApi2 that serves some data in json. I'm trying to access that particular API from Ionic on iOS and Android using Angular's $http. On Android everything is ok and I'm receiving correct result. But on iOS strange thing happens, as $http even don't send request and throws error immidiately, returning http status code 0. This problem exists only on iOS emulator and iPhone. Moreover, this behavior is not observable when requesting any other site or fake test api.
What I already tried:
Add "Access-Control-Allow-Origin: *" header.
Add proxy to ionic.project, but this fixed the problem only when running Ionic Serve
Add in config.xml
configure angular to use cross-domain by setting this:
$httpProvider.defaults.useXDomain = true;
delete $httpProvider.defaults.headers.common['X-Requested-With'];
Any clues? Maybe this is server-side problem?

Does this also happen on an iOS version lower than 9.0? Because there has been some problems with $http since iOS 9.0. If it doesn't, it would check out this article.
Looking for solutions
When I started searching for this error I found this forum thread. It
said that the contributors had got this error too and that the error
is triggered when a network request is made using the $http service. I
used $http in my app too, but I didn’t make any request through it
when the app was starting. Also, in the forum thread it said that the
problem is triggered by adding custom headers to a network request. To
solve the problem, headers shouldn’t have a leading space in the
value. I had custom headers but I didn't have any spaces before the
value. So I decided, (wrongly as it turned out), that this article
couldn't help me.
Here’s what I tried next:
I read all the advice from Ionic's blog article again and tried to
apply it to my project - it didn’t help. I decided that as I was
getting the error in vendor files, I should try updating Ionic
Framework, Ionic CLI and all third party libraries (Angular,
Restangular, ngStorage, ...) - it took some time, but when I ran the
app again I got the same error. I created a new "clear" ionic app and
it worked properly - so I was sure that the problem was somewhere in
my code. I started debugging the app and digging around in my code in
"the old school way" - trying to cut out blocks of code and see if the
app would then work (because I got the error before it was possible to
use any Safari dev tools for debugging). In this way I found out which
line in my code was triggering this error. It was this line:
$http.defaults.headers.common.Authorization = 'Basic ' + $localStorage.user.authToken;
I use my own service in dependency
injection which executes a line of code (see above) when the service
is initialized. This is why the $http service was also causing the
error I was encountering. I removed this line from my code and
replaced it with authorization token headers in the configuration of
each request, like this:
$http.post(appConfig.apiUrl + 'profile', data, { headers: {'Authorization': $localStorage.user.authToken} })
After that my app started to load (Hurrah) which let me see some other
problems (Booo).

Related

npm sync-request: NetworkError: Failed to execute 'send' on 'XMLHttpRequest'

I'm studying about ReactJS and during my research I got stuck in middle of this untraceable issue. The idea is to present information on browser screen fetched from Database. I've chosen WebAPI to serve as a channel for communicating with database. The API implementation is working as expected, I tested it using Postman.
But I'm encountering the subjected error when I try to access API through Reducer (React-Redux implementation), please refer below screenshot.
It seems to me a CORS (Cross-Origin Resource Sharing) issue, as both API & ReactJS app running on localhost using different ports, but I'm not sure. In either case, please help me get to the solution.

(Access-Control-Allow-Origin - CORS issue when fetching data from 2 URL for promises

So I have promises in AngularJS which fetch data from 2 URLs.
promises.push(loadingJson('example.com/1.json'));
promises.push(loadingJson('example.com/2.json'));
$q.all(promises).then(function(resultList){
}, function(errList){
});
After running the page (using Promises) in web server, it gives error "Origin 'www.abc' not allowed by Access-Control-Allow-Origin." and "XMLHttpRequest cannot load '1.json' and '2.json' due to access control checks".
For Jquery GET method I can use JSONP to solve the error.
But is there a way that can solve it in angularJS promises?
AngularJS is client sided. You can solve your problem server sided here and leave your AngularJS code untouched. You can use cors.
It depends on your web server. For example if you are using express try this package
https://www.npmjs.com/package/cors
and then set it correctly and it will work. (Perhaps you are trying to run server and client on the same host? it is quite a common scenario)

Getting CORS error When Using Spotify Open APIs

I'm getting CORS error while trying to get some data through Spotify's Open APIs such as API/v1/search?type=album&q=... and API/v1/albums/{id} in a Simple Angular 4 Application that searches for albums with a Query then tries to show that specific album Information.
I assume that these two APIs are open and don't need any kind of authorization. So How can I get data from these two when there's no JSONP method available without getting CORS error and without Authorization?
Passing client_id doesn't help I'm afraid.
As no one posted a proper answer, I ended up writing and using a simple wrapper over Spotify's API. Everything's working now! No more darn CORS errors or anything! :)

ng-token-auth, ionic, devise_token_auth; token get lost randomly in xhr request

I have inherited a Ionic app which uses ng-token-auth+devise_token_auth to handle the authentication and the session between front and back.
What happens is quite strange. Sometimes (specially with slow connections) the request (or the response) get lost and after that I get only 401 http errors.
I know that that everytime I send a request the token expires, but when the xhr request is cancelled (by the server I suppose, or by the browser, I don't know) the token is expired without having been replaced by the new one generated by devise_token_auth gem.
I know Rails but I'm not familiar with Angular, neither Ionic and I don't know exactly where to look.
After reading a lot of SO answers where noone seems having my problem (which happens locally and in staging/production), I checked the following
storage is set as localStorage.
config.batch_request_buffer_throttle = 20.seconds
there is no pattern between cancelled requests, sometimes I perform get for the username, sometimes a post or a put to a comment.
Is not a CORS problem because it would happen always or never. (moreover I'm using a proxy as explained in ionic blog)
Maybe it could be related to provisional headers chrome bug. But, how can I be sure?
What puzzles my is that it happens only sometimes and not always. (and there are no errors in the backend)
The only workaround I have found in the devise_token_auth documentation is change config.change_headers_on_each_request to false avoiding in this way the regeneration of the token.
But I don't like this solution because I think it hides the real problem in an insecure way instead of solving the token loss. Any suggestion?
Kindly, please check this thing:
Version: which version of this gem (and ng-token-auth, jToker or Angular2-Token if applicable) are you using?
Request and response headers: these can be found in the "Network" tab of your browser's web inspector.
Rails Stacktrace: this can be found in the log/development.log of your API.
Environmental Info: How is your application different from the reference implementation?
This may include (but is not limited to) the following details:
Routes: are you using some crazy namespace, scope, or constraint?
Gems: are you using MongoDB, Grape, RailsApi, ActiveAdmin, etc.?
Custom Overrides: what have you done in terms of [custom controller overrides]
5?
Custom Frontend: are you using ng-token-auth, jToker, Angular2-
Token, or something else?

how to get past cross origin error for http calls from ionic

I have been trying to call a HTTP GET URL from my ionic app. I am hitting cross-origin error
I got past that error on my Angular.JS app by using Factory. and also got past that on Meteor app by moving the call to server side i.e. by defining them under Meteor.methods()
However i am not able to get past the error on ionic even after using module.factory
Any ideas?
AngularJS provides 'JSONP' service as part of the $http module for achieving cross domain remote requests. Maybe you can use it.

Resources