如何修复 Echo 和 Angular 的刷新错误

Question

我正在设置一个使用 Go（使用 Echo）作为后端和 Angular 6 作为前端的 Web 服务器。我所做的是使用 Angular-cli 'ng new my-app' 创建一个简单的应用程序，添加一个 helloworld 组件和一个 '/helloworld' 路由，然后使用输出为 'dist' 的 'ng build --prod' 将其构建到生产环境中' 文件夹。文件夹结构：

dist

├── assets

│   ├── icons

│   └── logo.png

├── favicon.ico

├── index.html

├── main.js

├── polyfills.js

├── runtime.js

└── styles.css

然后我让 Go 使用以下代码 main.go 为该“dist”文件夹中的静态文件提供服务

func main() {

    e := echo.New()

    e.Static("/", "dist")

    e.File("/", "dist/index.html")

    e.Start(":3000")

}

现在，当我使用浏览器并转到“localhost:3000/”时，页面将正确提供，我可以使用 href 导航，这要归功于 Angular 路由，例如：“localhost:3000/home”页面将正确显示但如果我尝试刷新它，Echo 将返回一个显示以下内容的页面内容：

{“未找到信息”}

我知道我可以像这样手动设置路线：

e.File("/home","dist/index.html")

但是，如果我有更多的路线，那么做所有这些就很麻烦了。

我需要的是任何没有为 Echo 定义的路由都将映射到“index.html”。我确实尝试过：

e.File("/*", "dist/index.html")

和

e.GET("/*", func(c echo.Context) 

    return c.File("dist/index.html")

})

但后来我得到一个错误的空白页

"Uncaught SyntaxError: Unexpected token <  " 

包含所有 3 个文件 main.js、polyfill.js 和 runtime.js

我是 Echo 的新手，所以我不知道该怎么做。

Answer 1

这个问题与 Echo 没有严格的关系。Angular 进行路由的方式是它不从服务器请求页面。它更改了 URL 而没有实际从服务器请求另一个页面。因此，当您转到“/home”，然后刷新时，您的浏览器将尝试访问服务器并向其请求“/home”（与第一次相反，浏览器请求映射到“dist/”的“/” index.html”）。在 Echo 路由中找不到或未定义“/home”。因此，您会收到一条“未找到”消息。我建议您执行以下有关路由的操作e.Static("/dist", "dist")e.File("/*", "dist/index.html")e.Start(":3000")并在index.html请求资源的 URL 之前添加“/dist”。

Answer 2

echo中的static middleware也有一个HTML5选项：ege.Use(middleware.StaticWithConfig(middleware.StaticConfig{&nbsp; &nbsp; &nbsp; &nbsp; Root:&nbsp; &nbsp;"dist",&nbsp; &nbsp; &nbsp; &nbsp; Index: "index.html",&nbsp; &nbsp; &nbsp; &nbsp; Browse: true,&nbsp; &nbsp; &nbsp; &nbsp; HTML5:&nbsp; true,&nbsp; &nbsp; }))这似乎处理 SPA 网页。

Answer 3

将此留在这里作为替代方案，以防万一有人想要一个完整的示例。使用“/*”将捕获任何以“/”开头的路由或您想要的任何尚未定义的前缀。package mainimport (&nbsp; &nbsp; "github.com/labstack/echo/v4"&nbsp; &nbsp; "github.com/labstack/echo/v4/middleware")const (&nbsp; &nbsp; HTTP_PORT = ":1234")func main() {&nbsp; &nbsp; e := echo.New()&nbsp; &nbsp; // Logger Middleware&nbsp; &nbsp; e.Use(middleware.Logger())&nbsp; &nbsp; // Setup routes&nbsp; &nbsp; SetupRoutes(e)&nbsp; &nbsp; e.Logger.Fatal(e.Start(HTTP_PORT))}func SetupRoutes(e *echo.Echo) {&nbsp; &nbsp; // Catpure route /&nbsp; &nbsp; e.GET("/", getWebApp)&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; // Catpure route /test&nbsp; &nbsp; e.GET("/test", getTest)&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; // Catpure all routes starting with / that haven't been defined&nbsp;&nbsp; &nbsp; e.GET("/*", getWebApp)&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; // Use e.Any() for all request methods GET, PUT, POST, PATCH and DELETE&nbsp; &nbsp; e.Any("/*", getWebApp)}func getWebApp(ctx echo.Context) error {&nbsp; &nbsp; return ctx.File("../website_src/index.html")}func getTest(ctx echo.Context) error {&nbsp; &nbsp; return ctx.String(http.StatusOK, "Hello")}

Answer 4

在深入了解 Echo 之后，我也设法找到了另一种解决方案。Echo 有一个处理所有未知路由的 NotFoundHandler，所以我所做的只是让它在每次请求未定义的路由时返回“index.html”。这是我的代码：echo.NotFoundHandler = func(c echo.Context)&nbsp;&nbsp; &nbsp; return c.File("dist/index.html")}e := echo.New()e.Static("/", "dist")e.Start(":3000")我不确定这是否是一个好方法，但对于像我这样有同样问题的人来说，这是另一种选择