Angular JS - Blank Error Response - angularjs

I am learning Angular JS and am facing an issue with an the HTTP Get Request. Here is my code:
function countryController($scope,$http) {
delete $http.defaults.headers.common['X-Requested-With'];
$http.get("http://localhost:8080/countrybook/api/v1/countrybook")
.success(function(response) {
$scope.countries = response;
})
.error(function(response){
alert(response);
});
}
I get a blank error response (alert with nothing in it. when i debug in firebug i see that response is "") for some reason.
My headers look like this:
Response Headers:
Cache-Control private, must-revalidate
Content-Length 355
Content-Type application/javascript
Date Sat, 15 Nov 2014 16:53:52 GMT
Last-Modified Sat, 15 Nov 2014 16:52:06 GMT
Server WebStorm 9.0.1
Request Headers:
Accept */*
Accept-Encoding gzip, deflate
Accept-Language en-US,en;q=0.5
Cache-Control max-age=0
Connection keep-alive
Host localhost:63342
If-Modified-Since Sat, 15 Nov 2014 16:52:06 GMT
Referer http://localhost:63342/CountryBook/index.html
User-Agent Mozilla/5.0 (Windows NT 6.3; WOW64; rv:32.0) Gecko/20100101 Firefox/32.0
and the Response that I see in Firebug is this:
function countryController($scope,$http) {
delete $http.defaults.headers.common['X-Requested-With'];
$http.get("http://localhost:8080/countrybook/api/v1/countrybook")
.success(function(response) {
$scope.countries = response;
})
.error(function(response){
alert(response);
});
}
Could you please help me figure out whats wrong? When I use the same link mentioned above in the http get request directly from the browser I see the response that I expect. Thanks for your help!

The problem was:
The Same Origin Policy disallows reading the remote resource at localhost:8080/countrybook/api/v1/countrybook. This can be fixed by moving the resource to the same domain or enabling CORS.
Solved it by adding these two headers at the server side response:
.header("Access-Control-Allow-Origin", "*")
.header("Access-Control-Allow-Methods", "GET, POST, DELETE, PUT")
Smartbart24 - looking at the console logs helped. Thanks for your help!

So without knowing your backend my general $http pattern is:
$http.get(requestEndpointString)
.success(function(data,status,headers,config){
if(status!=200){
/*unexpected response status ...*/
console.log('API error status: '+status);
}else{
/* Success ... */
}
})
.error(function(data, status, headers, config){
/* Handle errors */
});
Maybe it helps you to debug with logging the response status ?
Also try to take out the line:
delete $http.defaults.headers.common['X-Requested-With'];

Related

What's the reason an angularjs httpprovider interceptor cannot access a custom http response header (CORS request)?

I have an angularjs 1.x application which communicates with a rest service using jsons.
Since the service sits under a different domain, I'm using CORS.
My angular application has a response interceptor that logs the response headers:
app.factory('responseInterceptor', ["$q", function ($q) {
return {
response: function (response) {
console.log(response.headers()); // log the headers!!!
return response || $q.when(response);
},
responseError: function (rejection) {
return $q.reject(rejection);
}
}
}]).
config(['$httpProvider', function ($httpProvider) {
$httpProvider.interceptors.push('responseInterceptor');
}]);
Now everything works ok, but I'm not able to access custom http response headers
I'm using a http sniffer tool and I can see the headers in the servers response.
I'm pretty sure that this has something to do with CORS but I can't nail it.
The response headers (including CORS) look like this:
Cache-Control: no-cache
Pragma: no-cache
Content-Type: application/json; charset=utf-8
Expires: -1
MY-CUSTOM-HEADER: Go Home This Works
Access-Control-Allow-Origin: *
Access-Control-Allow-Credentials: true
Access-Control-Allow-Methods: GET, POST, OPTIONS, PUT, PATCH, DELETE
Access-Control-Allow-Headers: MY-CUSTOM-HEADER, CONTENT-TYPE
Date: Tue, 21 Jun 2016 13:18:20 GMT
Content-Length: 14112
This is what I see in my console from the interceptor:
Object {pragma: "no-cache", content-type: "application/json; charset=utf-8", cache-control: "no-cache", expires: "-1"}
Questions:
What's the reason I cannot see the MY-CUSTOM-HEADER when I log the response headers? Or other http response header that I can see on my sniffing tool. Who blocks me from accessing them on the responseInterceptor?
Edit:
I've checked the same application under the same domain and COULD access the header with the same code. It does have something to do with CORS.
Ok, after identifying that the issue was CORS, I've found I was missing an CORS http header called Access-Control-Expose-Headers
After setting Access-Control-Expose-Headers="MY-CUSTOM-HEADER", I was able to access that header.

HTTP headers with Authorize sent as OPTIONS

I am making an authentication system based on tokens. When a user logs in a token sent back and this then submitted with each call to the server
Assigning a token
.factory('AuthenticationService', function($rootScope, $http, authService, $httpBackend) {
var service = {
login: function(user) {
$http.post('http://192.168.100.100/myApp/login', { user: user }, { ignoreAuthModule: true })
.success(function (data, status, headers, config) {
$http.defaults.headers.common.Authorization = data.authorizationToken;
console.log("token:" + data.authorizationToken);
authService.loginConfirmed(data, function(config) {
config.headers.Authorization = data.authorizationToken;
return config;
});
})
After this is executed calls are sent as OPTIONS rather than POST the problem being that I am sending to RESTful server and OPTIONS isn't ahhh ummm an option. i.e server expects POST, GET etc.
Chrome shows my headers as ..
General
**Remote Address:** 192.168.100.100:80
**Request URL:** http://192.168.100.100/myapp/login
**Request Method:** OPTIONS
**Status Code:** 404 Not Found
Response Headers
**Access-Control-Allow-Origin:** *
**Cache-Control:** no-cache, must-revalidate
**Connection:** Keep-Alive
**Content-Encoding:** gzip
**Content-Length:** 563
**Content-Type:** text/plain
**Date:** Tue, 04 Aug 2015 04:29:14 GMT
**Expires:** 0
**Keep-Alive:** timeout=5, max=100
**Server:** Apache/2.2.22 (Debian)
**Vary:** Accept-Encoding
**X-Powered-By:** PHP/5.4.41-0+deb7u1
Request Headers
OPTIONS /myapp/login HTTP/1.1
**Host:** 192.168.100.100
**Connection:** keep-alive
**Access-Control-Request-Method:** POST
**Origin:** null
**User-Agent:** Mozilla/5.0 (Linux; U; Android 4.0; en-us; GT-I9300 Build/IMM76D) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30
**Access-Control-Request-Headers:** authorization, content-type
**Accept:** */*
**Accept-Encoding:** gzip, deflate, sdch
**Accept-Language:** en-US,en;q=0.8
Will it always be OPTIONS and do I have to alter my RESTful server to accomodate this, should I not be able to see the token in the headers?
This is an preflight request to check if CORS are enaabled or not
During the preflight request, you should see the following two headers: Access-Control-Request-Method and Access-Control-Request-Headers. These request headers are asking the server for permissions to make the actual request. Your preflight response needs to acknowledge these headers in order for the actual request to work.
Shortly. You need to enable these headers at you server for actual request to work
Can you please check if CORS is enabled? if yes please try to handle OPTIONS request like this
if (req.method === 'OPTIONS') {
console.log('!OPTIONS');
var headers = {};
// IE8 does not allow domains to be specified, just the *
// headers["Access-Control-Allow-Origin"] = req.headers.origin;
headers["Access-Control-Allow-Origin"] = "*";
headers["Access-Control-Allow-Methods"] = "POST, GET, PUT, DELETE, OPTIONS";
headers["Access-Control-Allow-Credentials"] = false;
headers["Access-Control-Max-Age"] = '86400'; // 24 hours
headers["Access-Control-Allow-Headers"] = "X-Requested-With, X-HTTP-Method-Override, Content-Type, Accept";
res.writeHead(200, headers);
res.end();
}

Required Parameter is missing grant_type Google oauth2.0 AngularJS and Cordova inappbrowser

I am using Cordova's inappbrowser and integrating Google oauth2.0. Once I get the authorization code I make a post request to get my token. NO MATTER what I try I always get a 400 error with "Required Parameter is missing grant_type". I'm encoding uri, I'm setting the right headers but to no avail... can anyone help?
$http({
method: 'POST',
url: 'https://accounts.google.com/o/oauth2/token',
params:{code:authorization_code[0],
client_id:options.client_id,
client_secret:options.client_secret,
redirect_uri:options.redirect_uri,
grant_type:'authorization_code'},
headers:{
'Content-Type':'application/x-www-form-urlencoded',
}
}).success(function(data,status,headers,config){
deferred.resolve(data);
}).error(function(data, status,headers,config){
console.log('data, status, headers,config',data,status,headers,config);
deferred.reject(response.responseJSON);
});
and this is the output from the Chrome dev Console when I try to make the request
Request URL:https://accounts.google.com/o/oauth2/token?client_id=736406995874-oh7o4cmaju3jgprllln97nf0p3pc1f91.apps.googleusercontent.com&client_secret=ysgrIV6mJXxritfXnRcclV_U&code=4%2FnITDK731NhavPePthrVA1eX8LHFC.ojUX9K7DpBYaEnp6UAPFm0HWDS5njgI&grant_type=authorization_code&redirect_uri=http:%2F%2Flocalhost
Request Method:POST
Status Code:400 Bad Request
Request Headers
POST https://accounts.google.com/o/oauth2/token?client_id=xxx-oh7o4cmaju3jgprllln97nf0p3pc1f91.apps.googleusercontent.com&client_secret=xxx&code=4%2FnITDK731NhavPePthrVA1eX8LHFC.ojUX9K7DpBYaEnp6UAPFm0HWDS5njgI&grant_type=authorization_code&redirect_uri=http:%2F%2Flocalhost HTTP/1.1
Accept: application/json, text/plain, /
Origin: file://
testing: testing
User-Agent: Mozilla/5.0 (Linux; Android 4.4.2; SCH-I535 Build/KOT49H) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/30.0.0.0 Mobile Safari/537.36
Query String Parameters
client_id=xxx-oh7o4cmaju3jgprllln97nf0p3pc1f91.apps.googleusercontent.com&client_secret=xxx&code=4%2FnITDK731NhavPePthrVA1eX8LHFC.ojUX9K7DpBYaEnp6UAPFm0HWDS5njgI&grant_type=authorization_code&redirect_uri=http:%2F%2Flocalhost
Response Headers
HTTP/1.1 400 Bad Request
Pragma: no-cache
Date: Mon, 14 Jul 2014 06:35:22 GMT
Content-Encoding: gzip
X-Content-Type-Options: nosniff
Server: GSE
X-Frame-Options: SAMEORIGIN
Content-Type: application/json
Cache-Control: no-cache, no-store, max-age=0, must-revalidate
Transfer-Encoding: chunked
Alternate-Protocol: 443:quic
X-XSS-Protection: 1; mode=block
Expires: Fri, 01 Jan 1990 00:00:00 GMT
Wrong post request. The params property is used to set any additional request parameters to be appended to the URL query string. The params property is a JavaScript object with one property per request parameter to add.
Here for your reference.
You just need to send data/params in serialized (for angular use $httpParamSerializer)
$http({
method: 'POST',
url: 'https://accounts.google.com/o/oauth2/token',
params:$httpParamSerializer({code:authorization_code[0],
client_id:options.client_id,
client_secret:options.client_secret,
redirect_uri:options.redirect_uri,
grant_type:'authorization_code'}),
headers:{
'Content-Type':'application/x-www-form-urlencoded',
}
}).success(function(data,status,headers,config){
deferred.resolve(data);
}).error(function(data, status,headers,config){
console.log('data, status, headers,config',data,status,headers,config);
deferred.reject(response.responseJSON);
});

Why does a cross-domain angularjs $http.post request fail when a XMLHttpRequest succeeds?

I am trying to exercise the Trello API with an application key and token from an angular (version 1.0.5) webapp. The server seems correctly configured to handle CORS. A test request with http://test-cors.org from enable cors works as expected.
When I do a post request in one of my angular controllers:
$http.post(url).success(function(data) {
$scope.server_resp = data;
});
I get a Request header field Content-Type is not allowed by Access-Control-Allow-Headers error. (Even though, as you see below, the Access-Control-Allow-Origin is set to '*'). Why is this header added and can it be removed?
XMLHttpRequest
When I make the same request using raw XMLHttpRequest, it succeeds. Here are the headers for the XMLHttpRequest:
Request Method:POST
Status Code:200 OK
Accept:*/*
Accept-Charset:ISO-8859-1,utf-8;q=0.7,*;q=0.3
Accept-Encoding:gzip,deflate,sdch
Accept-Language:en-US,en;q=0.8
Connection:keep-alive
Content-Length:0
Host:api.trello.com
Origin:http://192.168.0.125:9000
Referer:http://192.168.0.125:9000/
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_2) AppleWebKit/537.22 (KHTML, like Gecko) Chrome/25.0.1364.172 Safari/537.22
Response
Access-Control-Allow-Methods:GET, PUT, POST, DELETE
Access-Control-Allow-Origin:*
Cache-Control:max-age=0, must-revalidate, no-cache, no-store
Content-Length:563
Content-Type:application/json
Date:Mon, 18 Mar 2013 02:49:37 GMT
Expires:Thu, 01 Jan 1970 00:00:00
X-Powered-By:Express
X-Server-Time:1363574977568
Angular $http.post
Here are the headers for the angular initiated request. Note that the browser made a pre-flight OPTIONS request:
Request Method:OPTIONS
Status Code:200 OK
Accept:*/*
Accept-Charset:ISO-8859-1,utf-8;q=0.7,*;q=0.3
Accept-Encoding:gzip,deflate,sdch
Accept-Language:en-US,en;q=0.8
Access-Control-Request-Headers:accept, origin, content-type
Access-Control-Request-Method:POST
Connection:keep-alive
Host:api.trello.com
Origin:http://192.168.0.125:9000
Referer:http://192.168.0.125:9000/
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_2) AppleWebKit/537.22 (KHTML, like Gecko) Chrome/25.0.1364.172 Safari/537.22
Response
Access-Control-Allow-Methods:GET, PUT, POST, DELETE
Access-Control-Allow-Origin:*
Content-Length:0
Content-Type:text/html; charset=utf-8
Date:Mon, 18 Mar 2013 02:51:00 GMT
X-Powered-By:Express
Is there a way to configure angular's request headers to allow the above $http.post() code to work?
The 'content-type' header is not accepted by the server and is added by default for Angular $http POST request (see $http doc). You can try to remove it from your $http config. Inject $httpProvider in your controller, then this might work:
delete $httpProvider.defaults.headers.post['Content-type']
You might have to try with 'content-type' also, I'm not sure of the case to use.
Add the headers param to the $http and you'll be fine.
var config = {
method: 'POST',
url: 'your url',
headers: {
'Content-Type': undefined
},
data: {
"channel": "#fun-and-game",
"username": $scope.question.title,
"text": $scope.question.text,
"icon_emoji": ":ghost:"
},
};
$http(config).success(function(data) {
$scope.server_resp = data;
}).error(function(response) {
});
for more info, check angularjs $http docs
As per this angular pull request, CORS can be made to work by deleting X-Requested-With which causes a pre-flight OPTIONS request:
App.config(['$httpProvider', function($httpProvider) {
delete $httpProvider.defaults.headers.common["X-Requested-With"];
}
Note that I have not tried this personally, but a co-worker had to deltete the header to make his CORS request work.
I just ran into a similar issue and the problem was that I was getting the url wrong. I was posting to 1/cards/actions/createCard because I missread the docs. I got an access-control related error even though headers etc. look right. Posting to 1/cards created a card, which is what I wanted.
This worked for me
$http({
method : "POST",
url : url,
data : $.param({key: 'value', key2 : 'value'}),
headers : { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' }
})
To avoid this issue, create a function in the server side to catch the 'OPTIONS' and just return true. Some thing as follows.
/**
* #url OPTIONS /
*/
public function options()
{
return;
}

error fetching backbone model (works in chrome but not in firefox and ie9)

I have one service that returns proper data in chrome but ends in error for firefox and ie9. It looks like the GET returns 200 OK code, but still ends in error callback. I'm fetching data via backbonejs (with jquery.getJson and with ajax I'm getting the same result). The same result I'm getting also if I try to fetch data from remote server or locally.
Chrome: Version 23.0.1271.64 m
FF: 16.0.2
IE9: 9.0.8112.16421
wcf:
[OperationContract]
[WebInvoke(Method = "GET", UriTemplate = "/getData/{name}", BodyStyle = WebMessageBodyStyle.Wrapped, ResponseFormat = WebMessageFormat.Json)]
List<Names> getData(string name);
serviceUrl:
"http://serverABC:4000/myService.svc/getData/test"
fetching from javascript:
via backbone or jqueryGetJson():
$.getJSON("http://serverABC:4000/myService.svc/getData/test", function () {
alert("success");
})
.success(function () { alert("second success"); })
.error(function (result) {
console.log('error:', result);
})
result:
"http://serverABC:4000/myService.svc/getData/test 200 OK 70ms"
headers:
Response Headers
Cache-Control private
Content-Length 6544
Content-Type application/json; charset=utf-8
Date Fri, 16 Nov 2012 14:09:46 GMT
Server Microsoft-IIS/7.5
Set-Cookie ASP.NET_SessionId=s3aguluzip0dw135glbxlwwf; path=/; HttpOnly
X-AspNet-Version 4.0.30319
X-Powered-By ASP.NET
Request Headers
Accept application/json, text/javascript, */*; q=0.01
Accept-Encoding gzip, deflate
Accept-Language en-US,en;q=0.5
Connection keep-alive
Host svgwbip93:4000
Origin http://localhost:51280
Referer http://localhost:51280/Default.aspx?ReturnUrl=%2f
User-Agent Mozilla/5.0 (Windows NT 6.1; WOW64; rv:16.0) Gecko/20100101 Firefox/16.0
result from debug:
readyState 0
responseText ""
status 0
**statusText "error"**
abort function()
always function()
complete function()
done function()
error function()
fail function()
getAllResponseHeaders function()
getResponseHeader function()
overrideMimeType function()
pipe function()
progress function()
promise function()
setRequestHeader function()
state function()
statusCode function()
success function()
then function()
toString function()
Response: - is empty (this is most probably the problem (but as I mentioned in Chrome I'm getting correct json data)
EDIT 1:
I tried to get raw response with fiddler and I'm getting the JSON. The big question is that why callback falls to error.
Here is my raw response:
HTTP/1.1 200 OK
Cache-Control: private
Content-Length: 29
Content-Type: application/json; charset=utf-8
Server: Microsoft-IIS/7.5
Set-Cookie: ASP.NET_SessionId=kuv3g0r2dgmu5bpaoayj5lic; path=/; HttpOnly
X-AspNet-Version: 4.0.30319
X-Powered-By: ASP.NET
Date: Fri, 16 Nov 2012 19:32:58 GMT
{"PlatformDrawingsResult":[]}
I verified the json - it seems OK, so what can be the problem....hmm. I forgot to mention that I'm using also requirejs (not sure if that will bring some light,..)
Cheers, Miro
The solution is (thanks to jwkeenan) :
I put this line at the beggining of each method in my web service and
now all browsers work.
HttpContext.Current.Response.AddHeader("Access-Control-Allow-Origin", "*");
and to get it to work in ie9 I needed to add this to my web app:
$.support.cors = true;

Resources