Javascript application is unable to generate access token from WSO2 gateway URL

Question

We have on premise WSO2 stack for managing the api subscription where there are client applications created in the wso2 store URL for generating access tokens. One of the development team in our organization is trying to generate the access token from the client id and secret by the means of javascript. The tokens are not getting generated and resulting into CORS issue. I have checked the documentations for similar issues and I have made change in the TokenAPI .xml file located under the <API_M>/repository/deployment/server/synapse-configs/default/api directory by adding the outsequence property. Unfortunately this did not solve the issue. I have read a few documentations and verified the cors configuration in the api manager.xml file it looked fine to me.

const token =

          "Base64(consumer-key:consumer-secret)";

          const url = "https://<gateway_Url>/token";

          const res = axios({

              method: "post",

              url: url,

              data: "grant_type=client_credentials",

              headers: {

                  "Authorization": `Basic ${token}`,

                  "Content-Type": "application/x-www-form-urlencoded",

                  Accept: "application/json"

              },

          });

cat /data/wso2/wso2am-2.6.0/repository/deployment/server/synapse-configs/default/api/_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>
            <property name="Access-Control-Allow-Headers" scope="transport" value="authorization,Access-Control-Allow-Origin,Content-Type,Action"></property>
            <send/>
        </outSequence>
    </resource>
    <handlers>
        <handler class="org.wso2.carbon.apimgt.gateway.handlers.ext.APIManagerCacheExtensionHandler"/>
        <handler class="org.wso2.carbon.apimgt.gateway.handlers.common.SynapsePropertiesHandler"/>
    </handlers>
</api>

Error - Access to XMLHttpRequest at 'https://api-uat.ucl.ac.uk/token' from origin 'null' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Answer 1

You might have to add the CORS handler to the token API under handlers.

<handler class= "org.wso2.carbon.apimgt.gateway.handlers.security.CORSRequestHandler">
    <property name="apiImplementationType" value="ENDPOINT"/>
</handler>