Rewrite URL for static website hosted in Azure Storage

Question

I have deployed Angular 7 app to Azure Storage Static Website.

Angular app makes calls to .NET Core API which is deployed to Azure App Service.

Is it possible to configure URL rewrite (reverse proxy) to route Angular app requests to .NET Core API without having to enable CORS? Similar way like using Angular proxy configuration for local development?

I have read that it is possible to use URL rewrite rules in Azure CDN, but I am not quite sure how to do it. https://learn.microsoft.com/en-us/azure/cdn/cdn-rules-engine-reference-features#url-rewrite

As far as I understand it is possible to specify only relative path in URL rewrite rule.

Any help is appreciated.

did you check my answer below? – Aakash Garg Jun 08 '20 at 04:17 — Aakash Garg, Jun 08 '20 at 04:17

score 12 · Answer 1 · answered Jan 08 '19 at 13:01

12

So yes you can do this, but to have it enabled you need to use the Azure Premium CDN, which is actually not very expensive and is charged by usage, so if your site is not very busy it should be fine.

You will need to go into the CDN portal and rules engine and create a Url-rewrite.

It will look like this..

Notice the regex [^?.]*(\?.*)?$ this will basically match any route without a file path (no file extension). This then redirects to index.html

Hope that helps you.

answered Jan 08 '19 at 13:01

Lenny D

1,734
4
22
43

Thanks! I will try your suggested approach. Is it allowed to specify absolute URL in destination pattern field? – Viktors Telle Jan 08 '19 at 15:46
No, It has to be relative to the origin – Lenny D Jan 08 '19 at 15:52
Then it means that it is not possible to achieve what I want. I need to rewrite the URL to another domain URL. – Viktors Telle Jan 08 '19 at 16:25

score 3 · Answer 2 · answered Jun 02 '20 at 08:19

3

You can use azure function proxy where your site is deployed. I am assuming for frontend you will have every url starting with /api.

{
    "$schema": "http://json.schemastore.org/proxies",
    "proxies": {
        "root": {
            "matchCondition": {
                "route": "/api/{*route}",
                "methods": [
                    "GET",
                    "HEAD"
                ]
            },
            "backendUri": "https://my-dot-net-server/{*route}": {
                //If you want to override any headers
            }
        }
   }
}

The above proxy will redirect your request to dotnet url and send the response.

answered Jun 02 '20 at 08:19

Aakash Garg

10,649
2
7
25

Thanks, this might actually work, but unfortunately, it is longer relevant since we have decided to deploy the app to Azure App Service and use URL Rewrite instead of the Static Website. – Viktors Telle Jun 08 '20 at 11:31
@ViktorsTelle Can you tell me your reasoning for doing so? We are contemplating between the two methods of deployment. – Jack Jul 04 '20 at 06:07
If I had an opportunity to choose now, I would definitely opt for a Static Website since it is a cheaper hosting option. – Viktors Telle Jul 06 '20 at 07:36
One small correction.. Don't need the the '*' while referencing the wildcard path in the backendUri.. "backendUri": "https://my-dot-net-server/{route}" – Saud Jan 14 '21 at 19:09

Rewrite URL for static website hosted in Azure Storage

2 Answers2