How to resolve CORS error in alfresco webscripts in alfresco sdk?

Question

I have created a alfresco webscript which can be accessed using thus url :

http://localhost:9191/alfresco/s/search/item/{itemIid} e.g. : http://localhost:9191/alfresco/s/search/item/it0001

when i hit directly from the browser address bar it work perfectly but when i invoke this from my angular service then i am getting CORS error

Failed to load http://localhost:9191/alfresco/s/search/item/it0001: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4201' is therefore not allowed access.

My angular part is this :

convert1(itemId:string){
    var headers = new Headers();
    headers.set('Content-Type','*');
    headers.set('Access-Control-Allow-Origin','*');
    headers.append('Authorization','Basic zfsdfsdfsdfdsf=');    
    return  this.http.get(http://localhost:9191/alfresco/s/search/item/it0001,{headers:headers});   
}

In alfresco-repo side I have addedd following in webscript code but this has not helped.

response.setHeader("Access-Control-Allow-Origin", "*"); 

what changes i can do in my alfresco-repo amp plugin so that this error can be avoided.

Any insight would be highly appreciated.

--------After Jeff Potts answer-----

1. D:\abcd-app-repo\target\amp-war\WEB-INF\web.xml
<!-- CORS Filter Begin -->
  <filter>
      <filter-name>CORS</filter-name>
      <filter-class>com.thetransactioncompany.cors.CORSFilter</filter-class>
      <init-param>
         <param-name>cors.allowGenericHttpRequests</param-name>
         <param-value>true</param-value>
      </init-param>
      <init-param>
         <param-name>cors.allowOrigin</param-name>
         <param-value>*</param-value>
      </init-param>
      <init-param>
         <param-name>cors.allowSubdomains</param-name>
         <param-value>true</param-value>
      </init-param>
      <init-param>
         <param-name>cors.supportedMethods</param-name>
         <param-value>GET, HEAD, POST, PUT, DELETE, OPTIONS</param-value>
      </init-param>
      <init-param>
         <param-name>cors.supportedHeaders</param-name>
         <param-value>origin, authorization, x-file-size, x-file-name, content-type, accept, x-file-type</param-value>
      </init-param>
      <init-param>
         <param-name>cors.supportsCredentials</param-name>
         <param-value>true</param-value>
      </init-param>
      <init-param>
         <param-name>cors.maxAge</param-name>
         <param-value>3600</param-value>
      </init-param>
   </filter>
   <!-- CORS Filter End -->

   <!-- Enterprise filter placeholder -->

   <filter-mapping>
      <filter-name>Global Localization Filter</filter-name>
      <url-pattern>/*</url-pattern>
      <dispatcher>REQUEST</dispatcher>
   </filter-mapping>

   <!-- CORS Filter Mappings Begin -->
  <filter-mapping>
      <filter-name>CORS</filter-name>
      <url-pattern>/api/*</url-pattern>
      <url-pattern>/service/*</url-pattern>
      <url-pattern>/s/*</url-pattern>
      <url-pattern>/cmisbrowser/*</url-pattern>
   </filter-mapping>
   <!-- CORS Filter Mappings End -->

2. In alfresco/WEB-INF/lib added cors-filter-2.5.jar, java-property-utils-1.9.1.jar Or cors-filter-2.4.jar and java-property-utils-1.9.1.jar Or cors-filter-1.9.3.jar but it does not work for me.

Answer 1

Try these steps:

1. Go into your expanded alfresco webapp directory under WEB-INF and edit web.xml.
2. Do a search for "CORS Filter".
3. Uncomment out the filter.
4. Now restart Tomcat and try again.