Angular & Ionic, $http not working in real device Android - angularjs

I am working on ionic application and using $http for get the data from web service. I have tested and its working on browser perfectly but i don't know why its not working on my android mobile, it just keep processing and after 3 to 5 mins it shows:
ionic.bundle.js:25000 POST http://xyz-domain.com/api/ net::ERR_CONNECTION_TIMED_OUT
Even i have installed cordova-plugin-whitelist plugin but still getting same.
My Code:
var ApiURL = 'http://xyz-domain.com/api/';
$http({
url: ApiURL,
method: 'POST',
data: 'action=activate&app_secret=123456',
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
}).then(function(res){
alert(res);
});
Can any one please tell me how i can solve this issue ?
Thanks

This might be the case that your white list plugin and android platform version are not compatible.Happened to me also.Updating the platform and the plugin resolved the issue.Also can you alert the data, status, headers, config that are returned by the service.

Related

react native multipart/form-data not working on debug mode (using axios)

I'm trying to call an endpoint that is only accepting 'multipart/form-data'.
I'm not even to trying to send an image, just a key-value pair.
When debug mode is activated on an iOS simulator (not yet tested on Android), the call is sent but the server doesn't recognize it like it should, so it's returning an error.
When debug mode is disable, the server understand the call perfectly well.
I'm using :
react-native: 0.69.5
axios: ^0.27.2
This is the api call I do
var bodyFormData = new FormData();
bodyFormData.append('avatar_file_name',"fileName.jpeg");
return axios.request({
method: 'POST',
url: '/profile/image',
data: bodyFormData,
headers: {'Content-Type': 'multipart/form-data'},
});

Send data from nodejs to angularjs

In WebStorm, can I run Angular and Node in the same project? Is there a project template for this?
i want to send an array from nodejs route to angularjs
Thank you!
this is my code
conroller.js
$http({
method: 'GET',
url: '/Profil'
}).then(function (success){
console.log("i get the data");
$scope.items=success;
},function (error){
});
Nodejs file :
personne1={FirstName:"a", contry:"usa",LastName:"sfn"};
personne2={FirstName:"b", contry:"usa",LastName:"sfn"};
personne3={FirstName:"x", contry:"usa",LastName:"sfn"};
list=[personne1,personne2,personne3];
console.log("hello from profil");
res.render('Profil',{items:list});
Angular is a frontend JavaScript library. NodeJS is a runtime environment using Chrome's V8 engine for your backend. Using them together is quite possible. One such example is a MEAN stack (MongoDB, Express, Angular, Node).
To get started in Webstorm, Jetbrains has a help page. There is also a starter that you can grab from Github.
Happy coding!

AngularJS [Ionic] - Google apis XMLHttpRequest cannot load

I would like get the json data from Google Api but with get method and jsonp method this is not work.
Her is my code :
$http({
method: 'get',
url: 'https://maps.googleapis.com/maps/api/place/search/json?location=46.2030350,6.1522080&radius=500&types=restaurant&sensor=false&key=MY_KEY&callback=?'
}).then(function successCallback(response,data) {
console.log(data)
}, function errorCallback(response) {
console.log('nope')
});
I'have XMLHttpRequest cannot load.
This is mostly like you are trying to run the file without a server directly via browser. You would need either xampp or other webserver.
OR just install python 2.7 and use the following command from where your project files are location python -m SimpleHTTPServer 8000 and then navigate to localhost:8000

Ajax authentication using CURL request: Ionic app, Django, Rest, Oauth2

I am successfully using a curl request to authenticate a user on my Django project with Django-social-auth using a Facebook token to return a token for my personal site. Quite simply, I have a Facebook token and I am converting it to a Django token in return, but I am only accomplishing this feat using a CURL request. The framework I am using comes from Philip Garnero (1).
The CURL request - curl -X POST -d "grant_type=convert_token&client_id=&client_secret=&backend=facebook&token=" http://localhost:8000/auth/convert-token
The confusion comes when I am trying to do this using an AJAX request.
Is there something wrong with the way my ajax is setup? Do I need to get a csrf token to begin with before I can convert my facebook token to a authenticated Django token?
Update: I am getting a 400 error unsupported_grant_type while running my ajax request through a proxy. The request is the same request I have successfully executing in both a curl command and a Postman command.
Ajax Request:
$http({
url: "proxy/url/...",
async: false,
crossDomain: true,
method: "POST",
data: {
"client_id": "...",
"client_secret": "...",
"grant_type": "password",
"username": "...",
"password": "..."
},
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
}).success(function(data, status, headers, config) {
console.log(data);
}).error(function(data, status, headers, config) {
console.log("error status = " + status);
console.log(angular.toJson(data));
});
(1) - https://github.com/PhilipGarnero/django-rest-framework-social-oauth2
I figured out the issue, but I cant point to the specific thing I did in order to get it working. I will instead write down everything I did in order to get a working system. My particular example was for an ionic app that used facebook authentication and converted the token to a django csrf token which I used to track users.
My setup: Django, Django rest-framework Social Oauth2 (Philip Garnero's setup), Django social auth, angular js, cordova facebook plugin, ionic (3rd party app that acts as the frontend) and finally a configured proxy service.
Steps: Number one, make sure to have a rest api system installed. I used Philip Garnero's api (1). Once I got the installable package from Garnero in place I had to configure an ionic proxy service. I used Ionic's tutorial to get it in place (2). That document is worth reading to understand the gist of cross domain requests. Finally, what I couldn't find without testing and researching around were the correct headers to attach to the ajax request. I ended up solving it using a very useful tool called Postman.
Here is a dumb example of that "confusingly difficult" request:
$http.post(Url, queryStringData,
{headers: {
'Accept': '*/*',
"cache-control": "no-cache",
'Content-Type': 'application/x-www-form-urlencoded'
}
}).success(function(data, status, headers, config) {
console.log(data.access_token);
}).error(function(data, status, headers, config) {
console.log("error status = " + status);
console.log(angular.toJson(data));
});
Please comment if you have questions. I will do my best to clean up the original post and may consider a tutorial if others are having the same issues. I spent 5 hours trying to crack this one.
(1)- https://github.com/PhilipGarnero/django-rest-framework-social-oauth2
(2)- http://blog.ionic.io/handling-cors-issues-in-ionic/

angularJS $http.get() success callback not be called on cross domain

I am developing a small application use angularJS. The html pages are local file which will not deploy on web server. I defined a service module which will call the remote webapi to get the json data, however my success callback not be invoked.
$http({ method: 'GET', url: remoteServiceUri }).
success(function (data, status) {
var response = data;
}).
error(function (data, status) {
var error = data;
});
it always call into the error method. how can I resolve this issue please?
I can confirm that the service api work fine, as I tried deploy the page and webapi on the same site, in this case, it works.
is this caused by the cross domain or any configuration required?
Thanks.
You need to configure your remote web service to handle the preflight OPTIONS request.
Your web service must add the following headers to the response of the preflight OPTIONS request as well as the actual request:
{
"Access-Control-Allow-Origin": "*",
"Access-Control-Expose-Headers": "Content-Type",
"Access-Control-Allow-Methods": "GET,POST,PUT,DELETE,OPTIONS",
"Access-Control-Allow-Headers": "Content-Type"
}
You can find details about what which headers are required, and what do they mean here: https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS
If you are using Apache, you could use proxypass to redirect requests. This way your angular app talks "locally" with your apache server, and it will pass the request to a different domain.
For example, in your httpd.conf set:
ProxyPass /foo http://foo.example.com/bar
In your angular app call
$http({ method: 'GET', url: "/foo/action" }).then(...);
Your apache will translate "/foo/action" to "http://foo.example.com/bar/action".
Bye bye cross domain issues!
For more info, see apache proxy module

Resources