SOLVED

Cannot resolve CORS error after deleting the custom domain names created for the API M endpoints

%3CLINGO-SUB%20id%3D%22lingo-sub-3186049%22%20slang%3D%22en-US%22%3ECannot%20resolve%20CORS%20error%20after%20deleting%20the%20custom%20domain%20names%20created%20for%20the%20API%20M%20endpoints%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-3186049%22%20slang%3D%22en-US%22%3E%3CP%3EI%20deployed%20an%20API%20M%20instance%20in%20internal%20vnet%20mode%20which%20will%20host%20all%20the%20endpoints%20inside%20my%20vnet.%20We%20have%20an%20app%20service%20that%20acts%20as%20the%20API%20M%20backend.%20I%20wanted%20to%20expose%20the%20api%20m%20gateway%20publicly%20using%20application%20gateway.%20As%20a%20part%20of%20that%20process%2C%20a%20custom%20domain%20name%20has%20been%20created%20for%20the%20gateway%20endpoint%20(of%20the%20api%20m)%20and%20used%20it%20as%20the%20fqdn%20for%20the%20backend%20pool%20of%20the%20app%20gateway.%20I%20configured%20the%20app%20gateway%20listener%20that%20will%20listen%20to%20the%20requests%20made%20to%20custom%20domain%20name%20of%20the%20api%20m%20gateway.%26nbsp%3BWe%20have%20a%20front%20end%20that%20is%20hosted%20by%20MS%20power%20apps%20which%20will%20access%20the%20api%2Fapp%20service%20that%20is%20behind%20the%20api%20M.%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20followed%20the%20steps%20mentioned%20in%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fazure-paas-blog%2Fintegrating-api-management-with-app-gateway-v2%2Fba-p%2F1241650%22%20target%3D%22_blank%22%3EIntegrating%20API%20Management%20with%20App%20Gateway%20V2%20-%20Microsoft%20Tech%20Community%3C%2FA%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EYet%2C%20I%20couldn't%20access%20the%20endpoint%20publicly%20from%20my%20laptop%20with%20the%20host%20file%20entry%20to%20the%20custom%20domain%20name%20of%20the%20api%20m%20mapped%20to%20app%20gateway%20public%20ip.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EIn%20addition%20to%20it%2C%20we%20are%20seeing%20CORS%20error%20when%20our%20portal%20(that%20is%20on%20power%20apps)%20tries%20to%20load%20the%20api%20m%20despite%20the%20inbound%20policy%20for%20CORS%20has%20been%20set%20as%20mentioned%20below.%3C%2FP%3E%3CP%3E%3CSTRONG%3ECORS%20error%3A%3A%3A%3C%2FSTRONG%3E%3C%2FP%3E%3CP%3E%3CSPAN%3EAccess%20to%20XMLHttpRequest%20at%20'%3C%2FSPAN%3E%3CA%20title%3D%22https%3A%2F%2Fgt-dv-fileupload-api.azure-api.net%2Fapi%2Ffilemanager%3Fpath%3Dd26c4b8d-6585-ec11-8d20-000d3ae92f2f%2F44333d44-6a85-ec11-8d20-000d3ae92f2f%2Ftogt%2527%22%20href%3D%22https%3A%2F%2Fgt-dv-fileupload-api.azure-api.net%2Fapi%2Ffilemanager%3Fpath%3Dd26c4b8d-6585-ec11-8d20-000d3ae92f2f%2F44333d44-6a85-ec11-8d20-000d3ae92f2f%2FToGT%2527%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%20nofollow%22%3Ehttps%3A%2F%2Fgt-dv-fileupload-api.azure-api.net%2Fapi%2Ffilemanager%3Fpath%3Dd26c4b8d-6585-ec11-8d20-000d3ae92f2f%2F44333d44-6a85-ec11-8d20-000d3ae92f2f%2FToGT'%3C%2FA%3E%3CSPAN%3E%26nbsp%3Bfrom%20origin%20'%3C%2FSPAN%3E%3CA%20title%3D%22https%3A%2F%2Fgtca-dev-portal.powerappsportals.com%2527%2F%22%20target%3D%22_blank%22%20rel%3D%22noreferrer%20noopener%22%3Ehttps%3A%2F%2Fgtca-dev-portal.powerappsportals.com'%3C%2FA%3E%3CSPAN%3E%26nbsp%3Bhas%20been%20blocked%20by%20CORS%20policy%3A%20Response%20to%20preflight%20request%20doesn't%20pass%20access%20control%20check%3A%20No%20'Access-Control-Allow-Origin'%20header%20is%20present%20on%20the%20requested%20resource.%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%3CSTRONG%3EInbound%20policy%3A%3A%3A%3C%2FSTRONG%3E%3C%2FP%3E%3CP%3E%3CCORS%3E%3C%2FCORS%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%20%3CALLOWED-ORIGINS%3E%3C%2FALLOWED-ORIGINS%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%20%3CORIGIN%3E*%3C%2FORIGIN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%20%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CP%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%20%3CALLOWED-METHODS%3E%3C%2FALLOWED-METHODS%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%20%3CMETHOD%3E*%3C%2FMETHOD%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%20%3C%2FP%3E%3CP%3E%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%20%3CALLOWED-HEADERS%3E%3C%2FALLOWED-HEADERS%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%20%3CHEADER%3E*%3C%2FHEADER%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%20%3C%2FP%3E%3CP%3E%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%20%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%3EI%20deleted%20the%20custom%20domain%20name%20of%20the%20api%20m%20gateway%2C%20deleted%20the%20self%20signed%20certificate%20used%20in%20key%20vault%2C%20deleted%20the%20app%20gateway%20(without%20deleting%20the%20inbound%20rules%2Flisteners%20one%20by%20one)%20and%20we%20still%20see%20the%20above%20cors%20error.%20Not%20sure%20how%20to%20deal%20with%20this.%20Appreciate%20the%20community's%20guidance%20and%20expertise.%3C%2FSPAN%3E%3C%2FP%3E%3CLINGO-SUB%20id%3D%22lingo-sub-3200699%22%20slang%3D%22en-US%22%3ERe%3A%20Cannot%20resolve%20CORS%20error%20after%20deleting%20the%20custom%20domain%20names%20created%20for%20the%20API%20M%20endpoints%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-3200699%22%20slang%3D%22en-US%22%3EI%20found%20out%20the%20reason%20for%20this.%20When%20we%20create%20a%20custom%20domain%20name%20for%20developer%20portal%20of%20the%20API%20M%2C%20there%20is%20a%20setting%2Fcheck-box%20that%20says%20enable%20CORS.%20When%20it%20is%20selected%2C%20it%20creates%20a%20global%20CORS%20policy%20(on%20all%20APIs)%20keeps%20the%20origin%20as%20the%20new%20custom%20domain%20name.%20It%20ignored%20the%20policy%20that%20has%20been%20applied%20on%20our%20specific%20api.%20After%20deleting%20the%20global%20cors%20policy%2C%20things%20started%20working%20fine.%3C%2FLINGO-BODY%3E
New Contributor

I deployed an API M instance in internal vnet mode which will host all the endpoints inside my vnet. We have an app service that acts as the API M backend. I wanted to expose the api m gateway publicly using application gateway. As a part of that process, a custom domain name has been created for the gateway endpoint (of the api m) and used it as the fqdn for the backend pool of the app gateway. I configured the app gateway listener that will listen to the requests made to custom domain name of the api m gateway. We have a front end that is hosted by MS power apps which will access the api/app service that is behind the api M. 

 

I followed the steps mentioned in Integrating API Management with App Gateway V2 - Microsoft Tech Community

 

Yet, I couldn't access the endpoint publicly from my laptop with the host file entry to the custom domain name of the api m mapped to app gateway public ip.

 

In addition to it, we are seeing CORS error when our portal (that is on power apps) tries to load the api m despite the inbound policy for CORS has been set as mentioned below.

CORS error:::

Access to XMLHttpRequest at 'https://gt-dv-fileupload-api.azure-api.net/api/filemanager?path=d26c4b8d-6585-ec11-8d20-000d3ae92f2f... from origin 'https://gtca-dev-portal.powerappsportals.com' 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.

Inbound policy:::

<cors>

            <allowed-origins>

                <origin>*</origin>

            </allowed-origins>

            <allowed-methods>

                <method>*</method>

            </allowed-methods>

            <allowed-headers>

                <header>*</header>

            </allowed-headers>

        </cors>

 

I deleted the custom domain name of the api m gateway, deleted the self signed certificate used in key vault, deleted the app gateway (without deleting the inbound rules/listeners one by one) and we still see the above cors error. Not sure how to deal with this. Appreciate the community's guidance and expertise.

1 Reply
best response confirmed by MahindraManoj (New Contributor)
Solution
I found out the reason for this. When we create a custom domain name for developer portal of the API M, there is a setting/check-box that says enable CORS. When it is selected, it creates a global CORS policy (on all APIs) keeps the origin as the new custom domain name. It ignored the policy that has been applied on our specific api. After deleting the global cors policy, things started working fine.