如何解决Azure 静态 Web 应用路由区分大小写
我正在使用 nextjs 构建一个静态站点,并使用静态 Web 应用程序将其托管在 azure 中。部署应用程序后,我注意到 next export
中动态生成的 url 实际上区分大小写,即 https://MYAPP.azurestaticapps.net/MYPAGE 无法解析但 https://MYAPP.azurestaticapps.net/mypage 可以解析。有没有办法在 nextjs 或 azure 级别解决这个问题?
解决方法
通常在nextjs中,所有的URL解析都应该是不区分大小写的,但是目前存在“URL解析大小写不一致”的bug 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
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。