Cors filter is not working on wso2 EI rest apis

Question

We tried to invoke rest APIs from angular 5 app, the APIs are designed and deployed on EI as .car files, however, when we start the angular app, calling rest APIs fails due to No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://10.5.222.34:9763' is therefore not allowed access. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://10.5.222.34:9763' is therefore not allowed access. . we tried to add the CORS filter in <EI_HOME>/conf/tomcat/web.xml as the bellow but with no luck:

    <filter> 
       <filter-name>CORS</filter-name>
       <filter-class>com.thetransactioncompany.cors.CORSFilter</filter-class> 
   </filter>
   <filter-mapping>
       <filter-name>CORS</filter-name>
       <url-pattern>/*</url-pattern>
   </filter-mapping>

Can anybody help me in finding what is the problem and how to solve it? and thank you in advance.
My code as requested is:
from the angular side is a normal HTTP POST client call, however, the browser send two request, the first one as OPTIONS to check if the server will accept the original request (the POST one) and the second is the original POST .
from the EI side:

<api context="/cmbassadmin/authentication" name="authentication" xmlns="http://ws.apache.org/ns/synapse">
    <resource methods="OPTIONS POST" uri-template="/login">
        <inSequence>
            <sequence key="InitiateCMBASSADMINAuthenticationSQ"/>
            <header name="Access-Control-Allow-Origin" scope="transport" value="*"/>
            <header name="Access-Control-Allow-Methods" scope="transport" value="GET,PUT,POST,DELETE,PATCH,OPTIONS"/>
            <header name="Access-Control-Allow-Headers" scope="transport" value="*"/>
            <header name="Content-Type" scope="transport" value="text/html;charset=utf-8"/>
            <property name="Access-Control-Allow-Origin" scope="transport" type="STRING" value="*"/>
            <property name="Access-Control-Allow-Methods" scope="transport" type="STRING" value="GET,PUT,POST,DELETE,PATCH,OPTIONS"/>
            <property name="Access-Control-Allow-Headers" scope="transport" type="STRING" value="*"/>
            <filter regex="OPTIONS" source="get-property('REST_METHOD')">
                <then>
                   <log>
                      <property name="message" value="in the preflight"/>
                   </log>
                   <respond/>
                </then>
                <else/>
            </filter>
            <log>
                <property expression="get-property('uri.var.username')" name="uri.var.username"/>
            </log>
            <call-template target="audit_trail">
                <with-param name="user_name" value="{get-property('uri.var.username')}"/>
                <with-param name="action_name" value="Login"/>
                <with-param name="description" value="Login to the xyz admin app"/>
            </call-template>
            <sequence key="AuthenticateWithIS_SQ"/>
            <loopback/>
        </inSequence>
        <outSequence>
            <header name="Access-Control-Allow-Origin" scope="transport" value="*"/>
            <header name="Access-Control-Allow-Methods" scope="transport" value="GET,PUT,POST,DELETE,PATCH,OPTIONS"/>
            <header name="Access-Control-Allow-Headers" scope="transport" value="*"/>
            <header name="Content-Type" scope="transport" value="text/html;charset=utf-8"/>
            <property name="Access-Control-Allow-Origin" scope="transport" type="STRING" value="*"/>
            <property name="Access-Control-Allow-Methods" scope="transport" type="STRING" value="GET,PUT,POST,DELETE,PATCH,OPTIONS"/>
            <property name="Access-Control-Allow-Headers" scope="transport" type="STRING" value="*"/>
            <send/>
        </outSequence>
        <faultSequence>
            <send/>
        </faultSequence>
    </resource>
</api>

Answer 1

Try adding the below properties before your send or respond mediator which sends the response back to the Angular.

<property name="Access-Control-Allow-Origin" scope="transport" type="STRING" value="*"/>
<property name="Access-Control-Allow-Methods" scope="transport" type="STRING" value="GET,PUT,POST,DELETE,PATCH,OPTIONS"/>
<property name="Access-Control-Allow-Headers" scope="transport" type="STRING" value="Authorization,Access-Control-Allow-Origin,Content-Type"/>

You can modify the properties according to your requirements.

Answer 2

When we define cors filters in /conf/tomcat/web.xml, filters will be applied to the tomcat servlet port, which is 9443 by default. If you invoke your API using the passthrough transport ports(eg: 8280 and 8243 by default), required 'Access-Control-Allow-Origin', etc. headers will not be present in the response. Can you try invoking your API using the servlet port?

eg: https://hostname:9443/cmbassadmin/authentication/login

Refer this for more details.