Cross Origin call is not allowing in browser

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

does response is of httpResponse or ServletResponse?? kindly provide request header as well from browser. — mohit sharma
Access-Control-Allow-Headers:x-requested-with, content-type for reponse and Access-Control-Request-Headers:authorization, x-requested-with for request is mentioned and in backend I have added "Access-Control-Allow-Headers", "x-requested-with, content-type, accept, authorization" but it is not working — user3428736

Majid Majid · Accepted Answer · 2016-09-15T11:01:25

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

Cross Origin call is not allowing in browser

1 Answers