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

当前位置： > > > > 如何修复 Echo 和 Angular 的刷新错误

来源：stackoverflow
2024-04-20 20:39:35
0浏览
收藏

Golang不知道大家是否熟悉？今天我将给大家介绍《如何修复 Echo 和 Angular 的刷新错误》，这篇文章主要会讲到等等知识点，如果你在看完本篇文章后，有更好的建议或者发现哪里有问题，希望大家都能积极评论指出，谢谢！希望我们能一起加油进步！

问题内容

我正在设置一个 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

然后我让 go 使用以下代码在“dist”文件夹中提供静态文件 main.go

func main() {
    e := echo.new()
    e.static("/", "dist")
    e.file("/", "dist/index.html")
    e.start(":3000")
}

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

{“message”:”未找到”}

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

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 新手，所以我不知道如何执行此操作。

解决方案

该问题与 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”。

echo 中的静态中间件中还有一个 html5 选项： 例如

e.Use(middleware.StaticWithConfig(middleware.StaticConfig{
        Root:   "dist",
        Index: "index.html",
        Browse: true,
        HTML5:  true,
    }))

它似乎可以处理 spa 网页。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《如何修复 Echo 和 Angular 的刷新错误》文章吧，也可关注公众号了解相关技术文章。