Azure API Management CORS Configuration optimization guide as Expected with Angular App
This might be a silly question, but I'm prototyping a solution and This might be a silly question, but I'm working with issues with CORS while trying to set up Azure API Management (APIM) for my Angular application..... Despite configuring CORS in APIM, I'm getting 'No 'Access-Control-Allow-Origin' header is present on the requested resource.' errors in the browser. The API is hosted on Azure App Service, and the Angular app is served from a different domain. I've added the following CORS policy in the APIM policy editor: ```xml <inbound> <base /> <cors> <allowed-origins> <origin>https://my-angular-app.com</origin> </allowed-origins> <allowed-methods> <method>GET</method> <method>POST</method> </allowed-methods> <allowed-headers> <header>*</header> </allowed-headers> </cors> </inbound> ``` I've also made sure that the CORS settings in my Azure App Service are set to allow the same origin. However, the browser still blocks the requests due to CORS policy. To troubleshoot, I've checked the network logs in the browser and confirmed that the OPTIONS preflight request is returning a 200 status, but the headers seem to be missing. I've also tried using Postman to test the API calls directly, and they work fine without any CORS issues. Has anyone else experienced this? What additional configurations might I be missing? Could there be a caching scenario or an order of policies affecting this? I'm currently on Azure API Management version 2023-06-01. For context: I'm using Javascript on Linux. My development environment is Windows. I'd really appreciate any guidance on this. Thanks for taking the time to read this! I've been using Javascript for about a year now.