Azure Frontdoor, forwarding Static Web App

Xavier Casals Virosque 45 Reputation points
2024-01-05T12:08:02.7933333+00:00

Hi,

I've setup my Azure Front Door with these two routes

domain "mydomain.com"


Default:

patterns to match: "/*"

Origin path: ""

Target is a MVC app that works like a charm.


Admin:

patterns to match: "/admin/*"

Origin path: "/admin/"

Target is Static Web App with an angular SPA.

The Admin app is found: in "mydomain.com/admin", and that's correct.

But when the app try to load "./assets/xyz.png" the browser trys to get the file in "mydomain.com/assets/xyz.png", instead of "mydomain.com/admin/assets/xyz.png".

How could I solve this?

NOTE: The Admin app in develop, runs at "localhost:4200", with no "Admin" sufix.

Thank you in advance!

Azure Front Door
Azure Front Door
An Azure service that provides a cloud content delivery network with threat protection.
858 questions
Azure Static Web Apps
Azure Static Web Apps
An Azure service that provides streamlined full-stack web app development.
1,178 questions
0 comments No comments
{count} votes

Accepted answer
  1. GitaraniSharma-MSFT 50,096 Reputation points Microsoft Employee Moderator
    2024-01-05T13:28:42.4466667+00:00

    Hello @Xavier Casals Virosque ,

    Welcome to Microsoft Q&A Platform. Thank you for reaching out & hope you are doing well.

    I understand that you've setup Azure Front Door with two routes, out of which one is working fine but the other one is not.

    On checking your configuration, I see that the patterns to match is set to /admin/* and the origin path is set to "/admin/" in the route but the incoming URL path is /assets/xyz.png.

    Please find the below document for more information on Patterns to match and origin path usage:

    https://learn.microsoft.com/en-us/azure/frontdoor/how-to-configure-endpoints#add-a-route

    Patterns to match - Configure all URL path patterns that this route accepts. For example, you can set the pattern to match to /images/* to accept all requests on the URL www.contoso.com/images/*. Azure Front Door determines the traffic based on exact match first. If no paths match exactly, then Front Door looks for a wildcard path that matches. If no routing rules are found with a matching path, then the request get rejected and returns a 400: Bad Request error HTTP response.

    Origin path: This path is used to rewrite the URL that Azure Front Door will use when constructing the request forwarded to the origin. By default, this path isn't provided. As such, Azure Front Door will use the incoming URL path in the request to the origin. You can also specify a wildcard path, which will copy any matching part of the incoming path to the request path to the origin. Origin path is case sensitive. Pattern to match: /foo/* Origin path: /fwd/ Incoming URL path: /foo/a/b/c/ URL from Azure Front Door to origin: fwd/a/b/c.

    So, in your case, if we see the route named "Admin", below is happening:

    Domain: mydomain.com

    Patterns to match: /admin/*

    Origin path: /admin/

    Incoming URL path: /assets/xyz.png

    URL from Azure Front Door to origin: mydomain.com/assets/xyz.png

    The path "/admin" is not getting added because the requested URL doesn't have any pattern to match.

    https://learn.microsoft.com/en-us/azure/frontdoor/front-door-route-matching?pivots=front-door-standard-premium#path-matching

    You will need to add a valid pattern to match path in the route and then you can add Origin path: /admin/ to rewrite that path to admin.

    Or maybe you can try the below route depending upon your setup, after validating that it doesn't affect other request paths or URLs:

    User's image

    Kindly let us know if the above helps or you need further assistance on this issue.


    Please "Accept the answer" if the information helped you. This will help us and others in the community as well.

    1 person found this answer helpful.

0 additional answers

Sort by: Most helpful

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.