Kubernetes internal CORS issues between services

While looking simple at the first look there are many ways to solve your issues. First some background on CORS: The browser automatically adds the X-Requested-With header, no need to add it in your Angular request. The browser will look for Access-Control-Allow-Origin in the response headers - otherwise you could tell the browser to trust anything, exactly what CORS prevents. (The server side has to decide if requests are allowed)So, if you want to have CORS enabled, you need to configure that in your asp.net application, which you did

        app.UseCors( options => options.AllowAnyOrigin().AllowAnyMethod().AllowAnyHeader());

But you don't need CORS - your setup is carefully constructed to avoid the need: CORS will only become active when your make a cross-origin request. You configured the nginx reverse proxy in that way, that you can request the API from the same origin, where you loaded the Angular app.

The reason this is not working, is that your browser is unable to connect to the internal kubernetes hostname k8s-demo-api since that is an internal name in the kubernetes cluster.

I assume that you added a hostPort to the container of your frontend pod and that nginx is running on port 4200 serving the Angular app on the root path and the reverse proxy path is /api.

Easiest solution, given that the rest of your setup is working: Change the URL for the API to use the created reverse proxy path

 api_url: "http://192.168.99.100:4200/api"

From the screenshot it looks like you are trying to request the api without a proper protocol (http:// in this case), make sure the Angular HttpClient is configured correctly.