Cross Origin call is not allowing in browser - angularjs

Question

I am trying to call one application to another where I am getting and error as "Request header field Authorization is not allowed by Access-Control-Allow-Headers in preflight response." and in my back-end I have used the following code as mentioned below
List<String> originList = Arrays.asList(origins.trim().split("( )*,( )*"));
String origin = request.getHeader("Origin");
if (originList.contains(origin)) {
originAllow = origin;
} else {
originAllow = originList.get(0);
}
response.setHeader("Access-Control-Allow-Origin", originAllow);
response.setHeader("Access-Control-Allow-Credentials", "true");
response.setHeader("Access-Control-Allow-Methods", "PUT, POST, GET, OPTIONS, DELETE, PATCH");
response.setHeader("Access-Control-Max-Age", "3600");
response.setHeader("Access-Control-Allow-Headers", "x-requested-with, accept, authorization");
response.setHeader("Access-Control-Expose-Headers", "Location");
In originAllow I am passing the url which I am trying to access but I am getting the below error,
XMLHttpRequest cannot load http://<<url>>. Request header field Authorization is not allowed by Access-Control-Allow-Headers in preflight response.
Please find the browser request and response header,
Response Header
Access-Control-Allow-Headers:x-requested-with, content-type
Access-Control-Allow-Methods:GET OPTIONS
Access-Control-Allow-Origin:*
Access-Control-Max-Age:3600
Allow:GET, HEAD, POST, PUT, DELETE, TRACE, OPTIONS, PATCH
Connection:close
Content-Length:0
Content-Type:text/plain; charset=UTF-8
Server:Apache-Coyote/1.1
X-Application-Context::8080
Request Header
Accept:/
Accept-Encoding:gzip, deflate, sdch
Accept-Language:en-US,en;q=0.8,ms;q=0.6
Access-Control-Request-Headers:authorization, x-requested-with
Access-Control-Request-Method:GET
Connection:keep-alive
Host:myrestapi-dev
Origin:http://localhost:9000
Referer:http://localhost:9000/
User-Agent:Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.116 Safari/537.36
OPTIONS <>?page=0&search_param=test&size=10,desc HTTP/1.1
Host: myrestapi-dev
Connection: keep-alive
Access-Control-Request-Method: GET
Origin: http://localhost:9000
User-Agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.116 Safari/537.36
Access-Control-Request-Headers: authorization, x-requested-with
Accept: /
Referer: http://localhost:9000/
Accept-Encoding: gzip, deflate, sdch
Accept-Language: en-US,en;q=0.8,ms;q=0.6
I am running application in localhost:port and the other application is using deployed url where the protocol,host are different.
Please let me know Is there anything I need to add to access the url from ui(angular) for authorization moreover it is working in other browser but not in chrome

Answer 1

this is because your server isn't allowing the authorization header.
To address it:
response.setHeader("Access-Control-Allow-Headers", "Content-Type, authorization");
should help you. as I am not sure about your backend I need to explain a bit more.
This is because it is up to the server to specify that it accepts cross-origin requests (and that it permits the Content-Type request header).Moreover, You need to make AJAX call from the same domain or make server-side changes, allowing requests from external domains.To address this you need to make changes in headers at http://yourdomain.com by allowing your external domain in headers:
Access-Control-Allow-Origin: *
1- ref1
2- ref2
Possible solution in AngularJs. : Using JSONP with Angular
The AngularJS $http service has a built-in method called "jsonp".
var url = "some REST API Url" + "?callback=JSON_CALLBACK";
$http.jsonp(url)
.success(function(data){
// whatever
});
Also, the url had to be appended with ?callback=JSON_CALLBACK.
I am going to expand this solution using JSONP
exampleurl = 'http://wikidata.org/w/api.php?whatever....&format=json'
//Number 1 :
$.ajax({
dataType: "jsonp",
url: exampleurl ,
}).done(function ( data ) {
// do whatever
});
//Number 2 :
$.ajax({
dataType: "json",
url: exampleurl + '&callback=?',
}).done(function ( data ) {
// do whatever
});
//Number 3 :
$.getJSON( exampleurl + '&callback=?', function(data) {
// do whatever
});
more information
1- getJson
2-$.Ajax