How to resolve Access to XMLHttpRequest has been blocked by CORS policy

I have an application gateway with 2 listeners configured using the private IP and ports 80 and 8080.

We use the listener with port 80 to access a web application developed in angular, which is deployed in aks (The route is application gateway -> load balancer of the aks)

And the listener with port 8080 is used by the Angular application to access the microservices, which are also deployed in an aks (The path of that listener is application gateway -> API management -> aks load balancer )

The first error that was detected by cors was the following: Access to XMLHttpRequest at 'http://XXXXXX:8080/api/mf/v1/login/info' from origin 'http://XXXXXXX' 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.

This error could be resolved by enabling the Access-Control-Allow-Origin response header in Application Gateway Rewrites in the routing rule that is directed to the api management



Now the following errors are appearing:

Access to XMLHttpRequest at 'http://XXXXXX:8080/api/mf/v1/login/info' from origin 'http://XXXXXXXX' has been blocked by CORS policy: Request header field ocp-apim-subscription-key is not allowed by Access-Control-Allow-Headers in preflight response.

Access to XMLHttpRequest at 'http://XXXXX:8080/api/mf/v1/login/info' from origin 'http://XXXXXXX' has been blocked by CORS policy: Request header field content-type is not allowed by Access-Control-Allow-Headers in preflight response.


I have added the following configuration in the application gateway rewrite but it has no effect





I don't know if something additional should be added in the application gateway configuration or at the code level of the angular application

Continue reading...