CORS Configuration not working in WSO2 API Manager for Oauth2/token API

I am using WSO2 API Manager version 4.1.0. In this, CORS configuration is not working even though all the configurations were made.

Note : I am not using WSO2 Identity server , only using API Manager.

I made the below configurations,

Deployment.toml file :

[apim.cors]
enable = true
allow_origins = "*"
allow_methods = ["GET","PUT","POST","DELETE","PATCH","OPTIONS"]
allow_headers = "*"
allow_credentials = false

under the path "/repository/deployment/server/synapse-configs/default/api" in OpenService.xml made the below changes as I couldnt find TokenAPI.xml only OpenService.xml were there in this version,

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

Even after making these changes , facing below error,

Access to XMLHttpRequest at 'https://11.22.333.44:9443/oauth2/token' from origin 'http://localhost:3000' 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.

Can someone help with this.

Solution

The OAuth2-related endpoints configurations are packed in the oauth2 web app located at the <APIM_HOME>/repository/deployment/server/webapps/oauth2 folder. You need to enable the CrossOriginResourceSharingFilter from Apache CXF to handle CORS for the OAuth2-related endpoints through the spring beans configuration.

To enable CORS, add the following to the cxf-servlet.xml file located at <APIM_HOME>/repository/deployment/server/webapps/oauth2/WEB-INF folder,

Add a new bean. Change the allowOrigins value according to your requirement.

<bean id="cors-filter" class="org.apache.cxf.rs.security.cors.CrossOriginResourceSharingFilter">
    <property name="allowHeaders">
        <list>
            <value>Authorization</value>
            <value>X-WSO2-Tenant</value>
            <value>content-type</value>
        </list>
    </property>
    <property name="exposeHeaders">
        <list>
            <value>Content-Disposition</value>
        </list>
    </property>
    <property name="allowCredentials" value="true" />
    <property name="allowOrigins"
                value="http://localhost:3000"/>
</bean>

You can use a system property as well for the allowed Origins as follows,

<property name="allowOrigins"
        value="#{systemProperties['oauth.endpoints.allowed.origins'] != null ?
            systemProperties['oauth.endpoints.allowed.origins'].split(',') : {}}"/>

Then start APIM by passing the system properties,

sh bin/api-manager.sh -Doauth.endpoints.allowed.origins=http://localhost:3000

<jaxrs:providers>
    <bean class="org.wso2.carbon.identity.oauth.endpoint.expmapper.InvalidRequestExceptionMapper"/>
    <ref bean="cors-filter" />
</jaxrs:providers>