azure - Azure 静态 Web 应用路由区分大小写

Question

我正在使用 nextjs 构建一个静态站点，并使用静态 Web 应用程序产品在 azure 中托管它。部署我的应用程序后，我注意到动态生成的 urlnext export实际上区分大小写，即https://MYAPP.azurestaticapps.net/MYPAGE无法解析，但https://MYAPP.azurestaticapps.net/mypage可以解析。有没有办法在 nextjs 或 azure 级别解决这个问题？

Answer 1

正常在nextjs中，所有的URL解析都应该不区分大小写，但是目前有个bug“URL解析区分大小写不一致” https://github.com/vercel/next.js/issues/21498

有解决此问题的解决方法 - 使用动态路由实现重定向：

import { useEffect } from 'react'
import { useRouter } from 'next/router'
import Error from 'next/error'

export default function ResolveRoute() {
const router = useRouter()

useEffect(() => {
    if (router.pathname === router.pathname.toLowerCase()) {
        // Route is already lowercase but matched catch all
        // page not found, display 404
        return <Error statusCode={404} />
    } else {
        router.push(router.pathname.toLowerCase())
    }
})

return <p>Redirecting...</p>
}

另一种选择是使用 Azure ApplicationGateway，因为它的规则不区分大小写。

https://docs.microsoft.com/en-us/azure/application-gateway/url-route-overview