Search code examples
corswso2api-manager

WSO2 Api Manger 3.0.0 Token API CORS issue with Angular Application

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-

enter image description here

enter image description here

enter image description here

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

Solution

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