NextJS 重写为可公开访问的应用程序不起作用

Question

我正在联系，因为我正在努力通过使用 Next 对重定向/重写的支持，将使用 AWS 部署的反向代理迁移到 NextJS 应用程序。目标是使用 NextJS 应用程序作为其余应用程序的入口点，这些应用程序是自主的全栈应用程序。

我试图解决的问题是，我需要重写的应用程序可以通过网址公开访问，但通过重写访问它们时，部分或大部分功能会丢失，或者甚至无法加载。

我了解这可能是一个 CORS 问题，旨在阻止我们请求的网站向其他可能存在恶意的来源发出请求。从我的角度来看，这可能是一个概念上的误解，但我是一名学生开发人员，有些概念仍然无法理解。

我如何评估这实际上是 CORS 问题？鉴于可能是这种情况，那么解决方案是要求此类应用程序的所有者将这个 Next 应用程序包含在 Access-Control-Allow-Origin 标头中？

感谢您的帮助。

Answer 1

经过对这项任务的一些研究和工作，我想分享我的发现并解释我如何找到适合我的用例的解决方案。希望它对其他人在同一过程中有所帮助。

问题：我想要一个 Next.JS 平台作为反向代理，允许我连接多个独立的应用程序，同时提供统一的用户体验，并能够控制我向客户端显示的 URL。

解决方案：使用 Next.JS 内置支持在 next.config 中进行重写。

我是怎么做到的：

在 NextJS 中配置重写可能需要应用程序使用多个规则。

• 首先我们配置基本重写：正如 Vercel 中的文档建议的那样重写到外部 URL 部分。

通过此设置，我们可以在浏览器的开发人员工具中看到 HTML 文档已正确检索，但 JavaScript、CSS 或字体文件均未正确加载。

• 配置进一步的重写规则以允许加载脚本和资源。

重写规则很可能是一组规则，如附图中的规则。