How to enable cross-domain query -CORS on Tomcat?

Using Angularjs I want to access a Geoserver service that uses Tomcat 7 as a web server. But when I call this service the console browser shows this error:

XMLHttpRequest cannot load http://127.0.0.1:8080/geoserver/rest/workspaces. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://127.0.0.1:3000' is therefore not allowed access.

      

        
        
        
      

    

So, to add CORS headers, I added the following lines to usr / share / geoserver / WEB-INF / web.xml:

<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>
</filter>
   <filter-mapping>
<filter-name>CorsFilter</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>

      

        
        
        
      

    

After restarting the server, the same error is displayed in the console browser. So I changed the lines above:

<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>

      

        
        
        
      

    

And this time error:

OPTIONS http://127.0.0.1:8080/geoserver/rest/workspaces 
(index):1 XMLHttpRequest cannot load    http://127.0.0.1:8080/geoserver/rest/workspaces. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://127.0.0.1:3000' is therefore not allowed access. The response had HTTP status code 403.

      

        
        
        
      

    

Response header:

**General**
   Remote Address:127.0.0.1:8080
   Request URL:http://127.0.0.1:8080/geoserver/rest/workspaces
   Request Method:OPTIONS
   Status Code:403 Forbidden

**Response Headers**
   Content-Length:0
   Content-Type:text/plain
   Date:Mon, 27 Jul 2015 05:57:17 GMT
   Server:Apache-Coyote/1.1

**Request headers**
   Accept:*/*
   Accept-Encoding:gzip, deflate, sdch
   Accept-Language:en-US,en;q=0.8
   Access-Control-Request-Headers:accept, access-control-allow-methods
   Access-Control-Request-Method:GET
   Cache-Control:max-age=0
   Connection:keep-alive
   Host:127.0.0.1:8080
   Origin:http://127.0.0.1:3000
   Referer:http://127.0.0.1:3000/
   User-Agent:Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36     (KHTML, like Gecko) Chrome/43.0.2357.134 Safari/537.36

      

        
        
        
      

    

I have read a lot of explanations on the internet, but nothing seems to work and I don't know what I am doing wrong.