How to allow APIM to pass through to Angular App

1
votes

I have an API hosted in Azure that is locked down and only available through a Gateway called Azure API Manager (APIM). The API portion works fine through APIM. But in the same project, I have an Angular 8 Application.

Typically I'd have my static site separate from my API, but my goal is to run them together following Microsoft's Api/SPA structure.

The issue is that Azure API Management does two weird things.

  1. I think I lose the MIME types of Javascript requests. So when my SPA loads, it in turn makes request for .js files, which get mime failures Strict MIME type checking is enforced for module scripts per HTML spec
  2. API Management adds its own sub path for routing, which is the app name. Like the APIM URL for my "appName" API would be https://subscription.azure-api.net/appName/. I don't know the exact issue, but this makes the HTML request for resources (img, css, js) to be off one way or another. I've had partial success setting http base href manually, but there still seems to be issues.

If anybody else has experience with APIM and Angular, any documentation would be appreciated. Basic google searches have been lacking.

1
angularazure-api-management

1 Answers

0
votes

I'll update this if I learn more. I went back and forth trying things and at some point it just started working. The most recent isolated change I had made was to the All APIs CORS policy to make it all *, and to remove the allowCredentials tag.

We will be duplicating efforts from Proof of Concept into an official environment, and I'll be vigilant to see if the issue occurs again and what exactly fixes it.