angular - 导航到 Azure Blob 存储上的 Angular 9 应用程序的 Azure 函数代理会导致 mime 类型错误

Question

我在一个 Azure Blob 存储上托管了多个 Angular 9 应用程序(请参阅 this question - 归功于 @Sam Erkiner)。现在我想使用 Azure 函数代理导航到这些应用程序之一。配置如下:

"proxyname": {
            "matchCondition": {
                "route": "/someroute"
            },
            "backendUri": "https://myazureblobstorage.z6.web.core.windows.net/folder/subfolder"
        }

如果我导航到 https://myazureblobstorage.z6.web.core.windows.net/folder/subfolder 一切正常。

如果我导航到 https://myazurefunction.azurewebsites.net/someroute，我会在控制台中收到几条 mime 类型错误消息，并且屏幕保持白色。我收到三个错误消息:“由于不允许的 MIME 类型 ("")，从 'link-to-js-file' 加载模块被阻止”

我该如何修复这些错误并显示 Angular 应用程序？提前致谢。

截图:

Answer 1

Try this config :- 

{
    "$schema": "http://json.schemastore.org/proxies",
    "proxies": {
        "root": {
            "matchCondition": {
                "route": "someRoute",
                "methods": [
                    "GET",
                    "HEAD"
                ]
            },
            "backendUri": "https://myazureblobstorage.z6.web.core.windows.net/subfolder/index.html",
            "responseOverrides": {
                "response.headers.Strict-Transport-Security": "max-age=31536000; includeSubDomains",
                "response.headers.X-Content-Type-Options": "nosniff",
                "response.headers.X-XSS-Protection": "1; mode=block",
                "response.headers.x-frame-options": "SAMEORIGIN",
                "response.headers.Content-Security-Policy": "default-src 'self'; script-src 'self' 'unsafe-eval'; style-src 'self' 'unsafe-inline';",
                "response.headers.Referrer-Policy": "same-origin",
                "response.headers.Feature-Policy": "payment 'self'; geolocation 'self'"
            }
        },
        "files": {
            "matchCondition": {
                "route": "someRoute/{filename}.{ext}",
                "methods": [
                    "GET",
                    "HEAD"
                ]
            },
            "backendUri": "https://myazureblobstorage.z6.web.core.windows.net/subfolder/{filename}.{ext}"
        },
        "routes": {
            "matchCondition": {
                "route": "someRoute/{*restOfPath}",
                "methods": [
                    "GET",
                    "HEAD"
                ]
            },
            "backendUri": "https://myazureblobstorage.z6.web.core.windows.net/subfolder/index.html",
            "responseOverrides": {
                "response.headers.Strict-Transport-Security": "max-age=31536000; includeSubDomains",
                "response.headers.X-Content-Type-Options": "nosniff",
                "response.headers.X-XSS-Protection": "1; mode=block",
                "response.headers.x-frame-options": "SAMEORIGIN",
                "response.headers.Content-Security-Policy": "default-src 'self'; script-src 'self' 'unsafe-eval'; style-src 'self' 'unsafe-inline';",
                "response.headers.Referrer-Policy": "same-origin",
                "response.headers.Feature-Policy": "payment 'self'; geolocation 'self'"
            }
        },
        "assets": {
            "matchCondition": {
                "route": "someRoute/assets/{file}",
                "methods": [
                    "GET",
                    "HEAD"
                ]
            },
            "backendUri": "https://myazureblobstorage.z6.web.core.windows.net/subfolder/assets/{file}"
        },
        "assets-folder-item": {
        "matchCondition": {
              "route": "my-center/assets/{folder}/{item}",
              "methods": [
                "GET",
                "HEAD"
            ]
         },
        "backendUri": "https://myazureblobstorage.z6.web.core.windows.net/folder/subfolder/assets/{folder}/{item}"
       }
    }
}