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

Question

我在一个 Azure Blob 存储上托管了多个 Angular 9 个应用程序（参见 - @Sam Erkiner 的致谢）。现在我想使用 Azure Function Proxies 导航到其中一个应用程序。配置如下：

"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 类型的错误消息，并且屏幕保持白色。我收到三个错误消息："Loading module from 'link-to-js-file' was blocked because of a disallowed MIME type ("")"

如何修复这些错误并显示 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}"
       }
    }
}

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

Azure Function Proxies that navigate to Angular 9 app on Azure Blob Storage result in mime type errors

azure

azure-blob-storage

azure-functions

angular

angular9