azureazure-static-web-appazure-front-door

Azure Front Door returns 403 Forbidden when routing to Azure Static Web App (Standard tier) but works with Free tier


I'm using Azure Front Door (Standard) to route traffic to two Azure Static Web Apps (SWAs) that run the same statically exported Next.js code (next export).

āœ… When routed to SWA A (Free tier), it works fine.

āŒ When routed to SWA B (Standard tier), I get a 403 Forbidden.šŸ” Setup:

Front Door endpoint: https://asorockendpoint-d6hjg2dre3b5h6h0.z01.azurefd.net/

SWA B (Standard tier) has no custom domain, just using default .azurestaticapps.net endpoint

No SSR or client-side routing — all routes are prebuilt

Both apps use the same staticwebapp.config.json, deployed to the root:

{
  "routes": [
    {
      "route": "/menu/*",
      "serve": "/menu/[id].html",
      "statusCode": 200
    }
  ],
  "globalHeaders": {
    "Access-Control-Allow-Origin": "https://asorockendpoint-d6hjg2dre3b5h6h0.z01.azurefd.net"
  }
}

SWA redeploys successfully after config changes

Front Door origin is set to the default domain of the SWA

What I'm trying to understand:

Why does the Free-tier SWA allow Front Door traffic, but the Standard-tier one returns 403?

Is there an extra config or header override needed on Standard-tier SWAs to work with Front Door?

Do I need to bind a custom domain to the SWA even when using Front Door?

Any help would be appreciated!


Solution

  • Azure Static Web Apps Standard tier requires explicit configuration to allow Front Door traffic, while Free tier apps are more permissive by default. Standard tier apps have enhanced security features that block traffic unless properly configured.

    Try updating staticwebapp.config.json file

    {
      "routes": [
        {
          "route": "/menu/*",
          "serve": "/menu/[id].html",
          "statusCode": 200
        }
      ],
      "networking": {
        "allowedIpRanges": ["AzureFrontDoor.Backend"]
      },
      "forwardingGateway": {
        "requiredHeaders": {
          "X-Azure-FDID": "<YOUR-FRONT-DOOR-ID>"
        },
        "allowedForwardedHosts": [
          "asorockendpoint-d6hjg2dre3b5h6h0.z01.azurefd.net"
        ]
      },
      "globalHeaders": {
        "Access-Control-Allow-Origin": "https://asorockendpoint-d6hjg2dre3b5h6h0.z01.azurefd.net"
      }
    }