如何使用Echo和Angular修复刷新错误

Question

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

dist
├── assets
│   ├── icons
│   └── logo.png
├── favicon.ico
├── index.html
├── main.js
├── polyfills.js
├── runtime.js
└── styles.css

然后，我使用以下代码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”。因此，您会收到Not Found消息。

我建议你做的是做关于路由的以下内容

e.Static("/dist", "dist")
e.File("/*", "dist/index.html")
e.Start(":3000")

在你的index.html里面，在所请求资源的URL之前添加“/ dist”。

Answer 2

@Seaskyways的回答对我来说很有用，但是我在查看Echo之后还设法找到了另一个解决方案。 Echo有一个处理所有未知路由的NotFoundHandler，所以我只是让它在每次请求未定义的路由时返回'index.html'。这是我的代码：

echo.NotFoundHandler = func(c echo.Context) 
    return c.File("dist/index.html")
}
e := echo.New()
e.Static("/", "dist")
e.Start(":3000")

我不确定这是否是一个很好的方法，但对于像我这样有问题的人来说，这是另一种选择