Not able to make a route public when all routes are authenticated.

Question

This is my staticwebapp.config.dev.json file:

{
  "routes": [  
    {
      "route": "/redirection/blog/new-feature-is-live-now",
      "allowedRoles": ["anonymous"]
    },
    {
      "route": "/",
      "allowedRoles": ["authenticated"]
    },    
    {
      "route": "/.auth/login/aad",
      "allowedRoles": ["authenticated"]
    },
    {
      "route": "/*",
      "allowedRoles": ["authenticated"]
    }
  ],
  "responseOverrides": {
    "401": {
      "redirect": "/.auth/login/aad",
      "statusCode": 302
    }
  },
  "navigationFallback": {
    "rewrite": "/index.html",
    "exclude": ["/images/*.{png,jpg,gif}", "/css/*"]
  },
  "auth": {
    "identityProviders": {
      "azureActiveDirectory": {
        "registration": {
       "openIdIssuer":"https://login.microsoftonline.com/......./v2.0",
            "clientIdSettingName": "AZURE_CLIENT_ID",
            "clientSecretSettingName": "AZURE_CLIENT_SECRET"
        }
      }
    }
  }
  
}

All routes were authenticated. But now I am trying to make "/redirection/blog/new-feature-is-live-now" accessible without authentication.

But I am getting an error when I try access this in incognito tab:
Access to script at 'https://login.microsoftonline.com/74437d1e-19e1-4555-bfcb-c6d8bace6725/oauth2/v2.0/authorize?response_type=code+id_token&redirect_uri=https%3A%2F%2Fstbti.testdev.com%2F.auth%2Flogin%2Faad%2Fcallback&client_id=9c168ea0-29d5-4225-9909-0dd9be37470d&scope=openid+profile+email&response_mode=form_post&nonce=5c36518ea4e145ae9999ca9d2f6e4276_20231016072922&state=redir%3D%252F.auth%252Fcomplete' (redirected from 'https://stbti.testdev.com/vendor.js') from origin 'https://stbti.testdev.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Failed to load resource: net::ERR_FAILED

I read documentation to configure routes. But still don't know why this error occurs.
What I can do to fix this issue?

Answer 1

Hi @Akshay Saini (SAI) ,

Thanks for reaching out.

The URL "https://stbti.testdev.com" which you are trying to access has been blocked by CORS. This error occurs when a web application running under one domain tries to access resources on a server located on a different domain.

To avoid this error, you need to implement globalHeader in your staticwebapp.config.json which enable those headers for a specific route.

{
  "globalHeaders": {
    "Access-Control-Allow-Origin": "
    "Access-Control-Allow-Methods": "POST, GET, OPTIONS"
  }
}

To enable headers for all routes, you can use "*"

 "Access-Control-Allow-Origin": "*",

Reference - https://learn.microsoft.com/en-us/azure/static-web-apps/configuration#global-headers

Hope this will help.

Thanks,

Shweta

---

Please remember to "Accept Answer" if answer helped you.