WSO2 Api Manger version 3.0.0 Token API CORS Issue

Recently I have come across a situation where I have done the single node installation of WSO2 API Manager Version 3.0.0. and come across challenges in accessing the Token APIs  that is used to generate/revoke the token. Below is the detailed summary of the issue and solution-

Environment: 
OS: Linux Ubuntu 16.04
Database: MySQL 8.x
WSO2 APIM: 3.0.0
WSO2 APIM and my Angular Application is running on two different VMs

Problem:
All the backend APIs were successfully registered with OAuth security. However, there was provision to enable/disable CORS per API basis via publisher as show below-

Now, we can't allow the the token validity to an indefinite time and hence specific duration is specified say 15 mins for API access and then the client need to request for a new token. The API that provides a new token is native to WSO2 APIM and there is no UI based provision in version 3.0.0 to enable/disable CORS (Cross Origin Resource Sharing). So there came a problem in my Angular application that was showing CORS policy restrictions for Token API. So this was a problem that how a client can request for a new token when APIM and UI Application is on different environments.

Solution

In APIM, there is a location where all APIs policies are defined and got changed dynamically as shown below-

[Files Path- /usr/lib64/wso2/wso2am/3.0.0/repository/deployment/server/synapse-configs/default/api]

Upon close observation, it has been identified that all registered APIs corresponding files are generated at this location with policies ( say CORS ) policy. Although _TokenAPI_.xml and _RevokeAPI_.xml exist at the same location but no provision identified in version 3.0.0 to changing the CORS policy. So there is manual edit required for _TokenAPI_.xml file. (Pls don't remove the underscore of this file). 

There is a requirement of inclusion of CORS handler in _TokenAPI_.xml file 

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

Below is the final version of code in this file-

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

The section marked in red colour has been included in this file then WSO2 server restart is required. After the restart, CORS restriction was removed for accessing the token API and the same was successfully consumed.

[References]

1. https://stackoverflow.com/questions/59103265/wso2-api-manger-3-0-0-token-api-cors-issue-with-angular-application

2. https://github.com/wso2/product-apim/issues/7057