Angularjs using JWT breaks CORS to Amazon S3 on login - angularjs

Question

I've got an interesting issue happening on my angularjs app. When I login, all of the template requests in angular made to Amazon S3 stop working, and return a 400 Bad Request. They work completely fine before you login. The only thing that should change when logged in, is a json web token is sent in the headers to verify the person logged in. My thoughts are maybe the interceptor that is sending the jwt in the headers is somehow affecting CORS on Amazon S3. Seems strange.
Here is the interceptor code:
.factory('TokenInterceptor', function ($q, $window) {
return {
request: function (config) {
config.headers = config.headers || {};
if ($window.sessionStorage.token) {
config.headers.Authorization = 'Bearer ' + $window.sessionStorage.token;
}
return config;
},
response: function (response) {
return response || $q.when(response);
}
};
});
EDIT: It was giving me an Access Origin error but I changed my CORS file on Amazon and it seemed to change to a 400 error now. My CORS file looks like:
<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<MaxAgeSeconds>3000</MaxAgeSeconds>
<AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>
EDIT: Including a sample of the response when trying to access the file after logging in:
Remote Address:1.2.3.4:443
Request URL:https://s3.amazonaws.com/bucket/path/to/file/template.html
Request Method:GET
Status Code:400 Bad Request
Request Headersview source
Accept:application/json, text/plain, */*
Accept-Encoding:gzip, deflate, sdch
Accept-Language:en-GB,en;q=0.8,en-US;q=0.6,fr;q=0.4,es;q=0.2
Authorization:Bearer xxxXXXxxxXXXxxXXxxxXXXXxxXXxx
Connection:keep-alive
Host:s3.amazonaws.com
Origin:http://domain.com
Referer:http://domain.com/
User-Agent:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.95 Safari/537.36
Response Headersview source
Access-Control-Allow-Methods:GET
Access-Control-Allow-Origin:*
Access-Control-Max-Age:3000
Connection:close
Content-Type:application/xml
Date:Sun, 21 Dec 2014 01:49:16 GMT
Server:AmazonS3
Transfer-Encoding:chunked
Vary:Origin, Access-Control-Request-Headers, Access-Control-Request-Method
x-amz-id-2:xxxXXXxxxXXXxx
x-amz-request-id:xxxXXXxxxXXxxxXXXxx

Answer 1

Just for the record. I was also having the same problem (or a very similar one which is: None files would be found after i did the login on my AngularJS app) and after hours digging on the problem i found what was the issue.
On my specific case it was nothing really related to S3 or CORS but in fact the cookies (and I'm still not really sure how it did cause the problem of not finding the files, but it did). As i saw on my application, i've drastically increased the information stored on my user after i did the login and it was exceeding the 4kb limit for the cookies and for some reason it was breaking down my whole website.
I'm checking the possibility to change from cookies to localStorage, but that is another history. the main thing is that after i reduce the number of information stored on the cookie it started working as it was supposed to.

Answer 2

You need to add transformRequest to http post to delete the Authorization header for that specific request.
transformRequest: function (data, headersGetter) {
//Headers change here
var headers = headersGetter();
delete headers['Authorization'];
return data;
},
Got the same problem on uploading to Amazon S3 the same issue so i added this and it worked.