I have one api which is being called from Angularjs from front end, when API hit from post-man it is taking hardly 1 sec to send response, but when it is being called from chrome browser, it leads to hangs it up and Aw, Snap! page.
we are using remote desktop, upon which only chrome is running with a single tab.
Any thoughts we this is happing to us, since api is fine with postman returning a response within 1 sec.
Sample Code of Angular service method, which send the response to controller,
this.getData() = function(chartJson) {
return $http({
method: "POST",
url: "api/xxxxxxxx/xxxxxxxx",
headers: { 'Content-Type': "Application/json" },
data: chartJson
});
};
In controller, we access this above method like,
this.getData()
.then(function(response){
console.log(response);
}, function(error){
console.log('Error '+error);
});
Thanks in advance.
Related
I have a REST API deployed on localhost with the following GET endpoint: localhost:9000/get-events/1
This endpoint is returning the correct response when I send the request through Postman or through a web browser. It also contains CORS headers etc, and I have also handled the options requests with appropriate headers. (The server is implemented in Play Framework).
The response from Postman for the above GET request is:
headers:
Access-Control-Allow-Origin →*
Content-Length →34
Content-Security-Policy →default-src 'self'
Content-Type →application/json
Date →Tue, 10 Apr 2018 04:50:16 GMT
Referrer-Policy →origin-when-cross-origin, strict-origin-when-cross-origin
X-Content-Type-Options →nosniff
X-Frame-Options →DENY
X-Permitted-Cross-Domain-Policies →master-only
X-XSS-Protection →1; mode=block
body:
{
"status": "success",
"events": "[<some list....>]"
}
I basically want the list that is being returned by the server to be loaded in a ng-repeat list in my Event List page when the user is navigating to it. I have implemented this in my code like this:
inside the controller in app.js:
$scope.getlist = function() {
$http({
url: 'localhost:9000/get-events/1',
method: 'GET'
}).then(function (response) {
console.log('SUCCESS: ' + JSON.stringify(response));
$scope.events = JSON.parse(response.data.events);
}, function (response) {
console.log('ERROR: ' + JSON.stringify(response));
});
}
and in the front end, index.html:
Fetch List
and, eventList.html:
<ul>
<li data-ng-repeat="event in events">{{event.name}}</li>
</ul>
When I click on the link, it gives the following error in the browser's console:
ERROR: {"data":null,"status":-1,"config":{"method":"GET","transformRequest":[null],"transformResponse":[null],"jsonpCallbackParam":"callback","url":"localhost:9000/get-events/1","headers":{"Accept":"application/json, text/plain, */*"}},"statusText":""}
from the server logs, it seems that the request is not reaching the server at all.
The strange thing is that I am also sending a POST request to the same server, while doing the user login and that request is successfully reaching the server and correctly giving the response from the angularJS app.
This is how I call the POST from my angularjs controller:
$scope.login = function () {
console.log('login called');
var loginURL = 'localhost:9000/login';
var loginInfo = {
'email': $scope.email,
'password': $scope.password
};
$http({
url: loginURL,
method: 'POST',
data: loginInfo,
headers: { 'Content-Type': 'application/json' }
}).then(function successLogin(response) {
console.log('SUCCESS: ' + JSON.stringify(response));
}, function failLogin(response) {
console.log('ERROR: ' + JSON.stringify(response));
});
}
What am I missing while doing the GET request?
In the server have you added CORS header Access-Control-Allow-Origin in server end ?
Its Working for me
try this.
html:
<a ng-click="getlist()">Fetch List</a>
js:
$scope.getlist = function () {
$http({
url: 'ControllerName/getevents/1',
method: 'GET'
}).then(function (response) {
console.log('SUCCESS: ' + JSON.stringify(response));
}, function (response) {
console.log('ERROR: ' + JSON.stringify(response));
});
}
output in console:
SUCCESS: {"data":"","status":200,"config":{"method":"GET","transformRequest":[null],"transformResponse":[null],"jsonpCallbackParam":"callback","url":"Employee/getevents/1","headers":{"Accept":"application/json, text/plain, */*"}},"statusText":"OK","xhrStatus":"complete"}
So, I was running my Angular App using Firefox earlier and I just thought of using Google Chrome. It helped me by providing this extra information in the console:
Failed to load localhost:9000/volunteer-events/1: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
So, it seems that in the HTTP get URL I was just using localhost:9000... instead of the complete http://localhost:9000...
changing my URL to http://localhost:9000... fixed the problem.
Answering this here so that anyone else who was stuck on this for long time like me would benefit from it!
Although I am still not sure how it worked for the POST ?
Although my backend is working correctly and I'm getting correct response from Postman crafted request
I can't see response in my angularJS controller. ( i execute this call inside controller to simplify situation )
$scope.click = function (auction_id) {
$http({
url: baseUrl + 'auctions/' + auction_id +'/followers',
headers: {
'Content-Type' : 'application/vnd.api+json'
},
method: 'POST'
})
.then(function(response) {
console.log(response);
})
.catch(function(response) {
return response;
});
};
I'm passing token with httpInterceptor which is working fine for the rest of my app.
URL is correct because I'm getting valid error number in console:
POST ##################/v1/auctions/172/followers
422 (Unprocessable Entity)
CategoryCtrl.js:64 undefined
64 line is that one console log in success .then(function....
Headers in (which I believe is) response headers from postman tab (third from Body in first screenshot)
Why response is undefined?
*Hashes in url code are mine.
From your REST API request, you're getting response with status 422, that means you've got a client error. Regarding your request, you have to handle a request when error will come. To handle error in asynchronous requests there is a second parameter of .then(mySuccessMethod(), myMethodOnError()) method.
More details about .then() and .catch() methods for promisses.
$scope.click = function (auction_id) {
$http({
url: baseUrl + 'auctions/' + auction_id +'/followers',
headers: {
'Content-Type' : 'application/vnd.api+json'
},
method: 'POST'
})
.then(function(response) {
console.log(response);
}, function(error) {
// Here goes your code to handle an error with status 4XX
console.log(error)
})
.catch(function(response) {
// Catch will come when you throw an error
return response;
});
};
When you made the request in Postman, you pass the token in the Auth attribute of the header in the request. In your code, you did not.
I am trying to post data to a web service but the data is missing.
Here is the code
var product = {
CategoryID: 'test'
};
$http({
url: URL,
method: "POST",
data: product,
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(data);
});
The POST data on the server is empty.
I have set up Access-Control-Allow-Origin,Access-Control-Allow-MethodAccess-Control-Allow-Headerss and Access-Control-Allow-Headers on the server.
This API works fine when tested through Postman
For your issue try a look at this one How do I POST urlencoded form data with $http in AngularJS? - you probably need to transform your request in order to sent in via $http service with the required content type.
i just tried the jira authentication API for cookies in postman and it worked perfectly fine. i got the cookie with the session ID which i used in other API calls.
But when i tried the exact same POST call in angularjs,it didn't work at all.
code for angular js $http call
$http({
method: "POST",
url: "http://gsd.company.com/jira/rest/auth/1/session",
data:JSON.stringify({"username": "user#company.com", "password": "passwordrandom"}),
headers:{
"Content-Type": "application/json"
}
}).then(function successCallback(response){
console.log(response);
},function errorCallback(response){
console.log("err");
console.log(response);
});
and i get the following error on the console
XMLHttpRequest cannot load
http://gsd.company.com/jira/rest/auth/1/session. Response for preflight is invalid (redirect)
I've tried nearly every solution out there like setting access headers in the client call but nothing works. Thanks in advance?
it should simply be
data:{""username": "user#company.com", "password": "passwordrandom"}
I am trying to call a webservice from angularjs.
The webservice is working fine from Chrome Rest client but i am getting error from Angularjs which is inside an ionic application.
I am calling service from Rest Client like in the attached image and i am getting success.
But when i try to call the same service from angularjs post method,error is coming that Endpoint not found.
The way i am calling from angularjs-
$http({
method:"POST",
url:"http://xyz/service.svc/GetData",
headers: {
'Authorization': 'aaa',
'client_id': 'bbb',
'devicemetadata': 'ccc',
'deviceID': 'ddd',
'Content-Type': 'application/json'
},
data:{"MethodName":"GetNominationDetails","ProgramID":"0","SessionID":"0","ParticipantID":"0","EID":"M123"}
})
.success(function(response){
alert(JSON.stringify(response));
console.log("success");
def.resolve(response);
})
.error(function(msg){
console.log("failure iidealist"+msg);
def.reject(msg);
});
Can anybody figure out the mistake.
I am taking care of access-origin issue in Ionic application.