The requested resource does not have an Access-Control-Allow-Origin header. The response was an HTTP 401 status code

Question

I am using angular $ http. Please find the code below.

$http({    
url: ' http://xxx.yyy.zzz:8080/..../sponsors',
method: 'GET',
   headers: {  'Token' : 'abc'  }
}).success(function(sponsors){
      $scope.sponsorList = sponsors;
}).error(function(sponsors){
       alert('failed to get sponsors')
});

I get the error below

"The response to the preliminary check request does not pass the access control check: the header" Access-Control-Allow-Origin "is present on the requested resource.

Reliable web services are deployed on Tomcat-8.

I added a CORS filter to tomcat / conf / web.xml as shown below.

<filter>
  <filter-name>CorsFilter</filter-name>
  <filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
</filter>
<filter-mapping>
  <filter-name>CorsFilter</filter-name>
  <url-pattern>/*</url-pattern>
</filter-mapping>

Even if I get the same error.

Can someone please help me how to fix this? Am I missing any client side headers? What else needs to be done on the server side?

Thank you in advance

Answer 1

<filter>
  <filter-name>CorsFilter</filter-name>
  <filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
  <init-param>
    <param-name>cors.allowed.origins</param-name>
    <param-value>*</param-value>
  </init-param>
  <init-param>
    <param-name>cors.allowed.methods</param-name>
    <param-value>GET,POST,HEAD,OPTIONS,PUT</param-value>
  </init-param>
  <init-param>
    <param-name>cors.allowed.headers</param-name>
    <param-value>Content-Type,X-Requested-With,accept,Origin,Access-Control-Request-Method,Access-Control-Request-Headers</param-value>
  </init-param>
  <init-param>
    <param-name>cors.exposed.headers</param-name>
    <param-value>Access-Control-Allow-Origin,Access-Control-Allow-Credentials</param-value>
  </init-param>
  <init-param>
    <param-name>cors.support.credentials</param-name>
    <param-value>true</param-value>
  </init-param>
  <init-param>
    <param-name>cors.preflight.maxage</param-name>
    <param-value>10</param-value>
  </init-param>
</filter>
<filter-mapping>
  <filter-name>CorsFilter</filter-name>
  <url-pattern>/*</url-pattern>
</filter-mapping>

Answer 2

, - , : http://tomcat.apache.org/tomcat-7.0-doc/images/cors-flowchart.png.

OPTIONS ( , )? "" Chrome dev...

Answer 3

.

REST- .

- .

,
"Access-Control-Allow-Origin" . HTTP 401

, , PREFLIGHT .

- , PREFLIGHT? PREFLIGHT?