WSO2 Api Manger 3.0.0 Token API CORS issue with Angular Application

Question

I have been using WSO2 API Manager 3.0.0 single node setup. I am facing the challenge of invocation of Token APIs ( available at https://host:port/token?grant_type=client_credentials ) that are used to get the token. After checking few blogs I have identified a couple of files requires changes. Theses are-

Files: _TokenAPI_.xml and _RevokeAPI_.xml 
Files Location: /usr/lib64/wso2/wso2am/3.0.0/repository/deployment/server/synapse-configs/default/api

I have made the changes as per the below code -

<handlers>
    <handler class="org.wso2.carbon.apimgt.gateway.handlers.security.CORSRequestHandler">
        <property name="apiImplementationType" value="ENDPOINT"/>
        <property name="allowHeaders" value="authorization,Access-Control-Allow-Origin,Content-Type,SOAPAction"/>
        <property name="allowedOrigins" value="*"/>
        <property name="AuthorizationHeader" value="Authorization"/>
        <property name="allowedMethods" value="GET,PUT,POST,DELETE,PATCH,OPTIONS"/>
        <property name="allowCredentials" value="true"/>
    </handler>
    <handler class="org.wso2.carbon.apimgt.gateway.handlers.ext.APIManagerCacheExtensionHandler"/>
    <handler class="org.wso2.carbon.apimgt.gateway.handlers.common.SynapsePropertiesHandler"/>
</handlers>

I am using Angular application to invoke the token API but the invocation is still not successful and causing CORS issue. I have also tried to remove Underscore( _ ) from file names and renamed them as TokenAPI.xml and RevokeAPI.xml but still no luck. Can you please assist.Below is the complete XML for

_TokenAPI_.xml

 <api xmlns="http://ws.apache.org/ns/synapse" name="_WSO2AMTokenAPI_" context="/token"> <resource methods="POST" url-mapping="/*" faultSequence="_token_fault_"> <inSequence> <property name="uri.var.portnum" expression="get-property('keyManager.port')"/> <property name="uri.var.hostname" expression="get-property('keyManager.hostname')"/> <send> <endpoint> <http uri-template="https://{uri.var.hostname}:{uri.var.portnum}/oauth2/token"> <timeout> <duration>60000</duration> <responseAction>fault</responseAction> </timeout> </http> </endpoint> </send> </inSequence> <outSequence> <send/> </outSequence> </resource> <handlers> <handler class="org.wso2.carbon.apimgt.gateway.handlers.security.CORSRequestHandler"> <property name="apiImplementationType" value="ENDPOINT"/> <property name="allowHeaders" value="authorization,Access-Control-Allow-Origin,Content-Type,SOAPAction"/> <property name="allowedOrigins" value="*"/> <property name="AuthorizationHeader" value="Authorization"/> <property name="allowedMethods" value="GET,PUT,POST,DELETE,PATCH,OPTIONS"/> <property name="allowCredentials" value="true"/> </handler> <handler class="org.wso2.carbon.apimgt.gateway.handlers.ext.APIManagerCacheExtensionHandler"/> <handler class="org.wso2.carbon.apimgt.gateway.handlers.common.SynapsePropertiesHandler"/> </handlers> </api>

XHR information is as below-

[EDIT] My API Manager and Angular Application is running on different environment ie different virtual machines.

Answer 1

You can use the API gateway CORS handler

<handler class="org.wso2.carbon.apimgt.gateway.handlers.security.CORSRequestHandler">

in token API as well. Once added your _TokenAPI_.xml file should look like below

<api xmlns="http://ws.apache.org/ns/synapse" name="_WSO2AMTokenAPI_" context="/token">
    <resource methods="POST" url-mapping="/*" faultSequence="_token_fault_">
        <inSequence>
            <property name="uri.var.portnum" expression="get-property('keyManager.port')"/>
        <property name="uri.var.hostname" expression="get-property('keyManager.hostname')"/>
            <send>
                <endpoint>
                     <http uri-template="https://{uri.var.hostname}:{uri.var.portnum}/oauth2/token">
                        <timeout>
                            <duration>60000</duration>
                            <responseAction>fault</responseAction>
                        </timeout>
                    </http>
                </endpoint>
            </send>
        </inSequence>
        <outSequence>
            <send/>
        </outSequence>
    </resource>
    <handlers>
        <handler class="org.wso2.carbon.apimgt.gateway.handlers.ext.APIManagerCacheExtensionHandler"/>
        <handler class="org.wso2.carbon.apimgt.gateway.handlers.security.CORSRequestHandler">
            <property name="apiImplementationType" value="ENDPOINT"/>
            <property name="AuthorizationHeader" value="Authorization"/>
        </handler>
        <handler class="org.wso2.carbon.apimgt.gateway.handlers.common.SynapsePropertiesHandler"/>
    </handlers>
</api>