I'm using APIM 4.1 and WSO2 IS 5.11.0, i'm getting CORS error on token API in UI

Question

Access to XMLHttpRequest at 'https://teplaycontractbilling.teplay.co:9443/oauth2/token' 
from origin 'http://teplaycontractbilling.teplay.co:83' 
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.

polyfills-es2015.c0dad542fec4b8cec822.js:1     POST https://teplaycontractbilling.teplay.co:9443/oauth2/token

I am working with WSO2 APIM 4.0.0 using WSO2 IS 5.11.0 as Key Manager, when a WSO2 APIM hosted api is called from the frontend application, the following error appears in the developer's console on the web browser:

Access to XMLHttpRequest at 'https://apim.mydomain/oauth2/token' from origin 'https://frontendapp.mydomain' 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.

Making a token request from Postman to https://apim.mydomain/oauth2/token (WSO2 APIM token API), effectively the Access-Control-Allow-Origin is missing in the response. Some blogs and wso2 documentation recommended including CORSRequestHandler handler to token API, I did this in this way:

Configuring WSO2 APIM to use Artifact configuration files adding the following lines to the deployment.toml file:

[apim.sync_runtime_artifacts.gateway.skip_list]
apis = ["_OpenService_.xml","_RevokeAPI_.xml", "_TokenAPI_.xml"]

  Including the _TokenApi_.xml file to wso2am-4.0.0/repository/deployment/server/synapse-configs/default/api path with the following code:

<?xml version="1.0" encoding="UTF-8"?><api xmlns="http://ws.apache.org/ns/synapse" name="_WSO2AMTokenAPI_" context="/oauth2/token" binds-to="default">
    <resource methods="POST" binds-to="default" 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.common.SynapsePropertiesHandler"/>
        <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"/>
            <property name="allowedOrigins" value="*"/>
            <property name="allowedMethods" value="GET,PUT,POST,DELETE,PATCH,OPTIONS"/>
        </handler>
    </handlers>
</api>

  Configuring WSO2 IS to enable CORS including the following configuration into deployment.toml file

[cors]
allow_generic_http_requests = true
allow_any_origin = true
allowed_origins = []
allow_subdomains = false
supported_methods = [
    "GET",
    "POST",
    "HEAD",
    "OPTIONS"
]
support_any_header = true
supported_headers = []
exposed_headers = ["Location","authorization","Access-Control-Allow-Origin","Content-Type"]
supports_credentials = true
max_age = 3600
tag_requests = false

 

But it is still without working, the response from the WSO2 APIM token API does not include the Access-Control-Allow-Origin header

Answer 1

In APIM 4.1.0 token endpoint is not proxied. If you are trying to access the token endpoint hosted in APIM you should follow instructions in [1] and configure the CORSFilter for oauth2 webapp. You may refer to [2] and set the parameters as required. deployment.toml config for CORS is not supported by APIM 4.1.0 [3]

[1]. https://medium.com/@dilinitharanga721/ce5de83cfa66

[2]. https://www.javadoc.io/static/com.thetransactioncompany/cors-filter/1.3.2/com/thetransactioncompany/cors/CORSFilter.html

[3]. https://github.com/wso2/api-manager/issues/1175