I'm trying to link an Azure APIM API to my static web site, but I'm getting a 404 from /api/

Question

I've created several APIs in APIM which I can test independently and they work as expected. However, when linked to my Static Web App, it is getting a 404 because the static webapp is proxying to the APIM url with the extra "/api" in the URL that the APIM API is not expecting... I tried removing that with a policy on "All APIs":

``

But this doesn't appear to work... I still get a 404, and I'm not sure how to see if the policy is getting applied to the request or if the APIM is just returning 404 because it can't route the request...

Answer 1

It sounds like you may be facing an issue with the URL path of your API when proxied through Azure API Management (APIM). To debug this issue, you can follow these steps:

1. Verify that the policy is correctly applied: To do this, you can check the trace logs in APIM. If the policy is not applied, it will show up in the trace logs.
2. Check the request and response in APIM: You can use the "Try-It" feature in APIM to test the API and see the request and response details. This will give you a clearer picture of what's happening at the APIM layer.
3. Check the routing of the request: Make sure that the API in APIM is correctly routing to the correct endpoint. You can also check the APIM product configuration to see if it's correctly configured to route the requests to the correct backend.
4. Validate the endpoint URL: Ensure that the endpoint URL in APIM is correct and matches the URL that the API is expecting. You can update the endpoint URL if necessary, to include the "/api" path if it's missing.

By following these steps, you should be able to identify the root cause of the 404 error and resolve it.

Answer 2

Greg Rubino I assume you have followed docs: https://learn.microsoft.com/en-us/azure/static-web-apps/apis-api-management#link-an-azure-api-management-service in linking APIM with Azure Static Web App and while testing, you got 404 not found.

Please note, we have API constraints listed and the backend URLs need to start with /api which is per design. So, after you add specific API to the product, please make sure you have set up URL suffix for the API as api like below:

With the above set up, you can call static web app like https://<swa-name>.azurestaticapps.net/api/users which should connect to configured APIM like https://<apim-name>.azure-api.net/api/users. I see that API URL suffix must be unique for each API in APIM so you can have API1 suffix as /api/api1 and API2 as /api/api2 etc. This feature is currently in preview and if you like to share feedback to our product team, please feel free to submit via https://feedback.azure.com/d365community/forum/79b1327d-d925-ec11-b6e6-000d3a4f06a4

Also, based on how backend APIs are set up, you can adjust backend form using rewrite-uri policy and check out Rewrite URL doc for more info and samples.

I hope this helps with your question but if you face any issues, feel free to add a comment. Would be happy to answer any. Please accept as "Yes" if the answer is helpful, so that it can help others in the community.

Answer 3

UPDATE:

I have found a workaround which involves manually adding api/ to the suffix. So for my-function-app in API Management settings I need to specify the API URL Suffix as api/my-function-app. I will have to do this for every single API which I add to APIM which feels a bit hacky, and not how it was intended, especially as APIM by default strips the /api prefix out of function apps when calling them from the gateway.

ORIGINAL ANSWER

I have the same issue. Here is my current scenario:

• APIM: https://my-api-gateway.azure-api.net
• SWA: https://my-web-app.azurestaticapps.net
• API: https://my-function-app.azurewebsites.net

I can call the API directly from my function app (with api prefix)

e.g. https://my-app-app.azurestaticapps.net/api/myFunction

I can call the API directly from the APIM URL app (no api prefix)

e.g. https://my-api-gateway.azure-api.net/my-function-app/myFunction

I have connected APIM as the backend to my web app. I would expect then that all requests to /api would be proxied to the APIM correctly but when I call

https://my-web-app.azurestaticapps.net/api/my-function-app/myFunction

I get a 404 error.

I have checked the APIM logs and I can see the app is attempting to fetch from https://my-api-gateway.azure-api.net/api/my-function-app/myFunction, but the correct URL (see above) should not have the /api prefix.

Is this a bug or am I doing something wrong?

Answer 4

What I ended up doing is adding an APIM API which has this policy:

<policies>
<inbound>
<send-request mode="copy" response-variable-name="res" timeout="60" ignore-error="false">
<set-url>@(context.Request.OriginalUrl.Scheme + "://" + context.Request.OriginalUrl.Host + context.Request.OriginalUrl.Path.Replace("/api", "") + "?" + context.Request.OriginalUrl.QueryString)</set-url>
</send-request>
<return-response response-variable-name="res" />
</inbound>
<backend>
<forward-request />
</backend>
<outbound />
<on-error /></policies>

This is basically another proxy from the /api API. Not sure how much latency this adds, but it seems to work for now. Thanks for all the answers! Let me know if you know of a better way.