登录重定向后刷新页面时出现 404 错误问题

Question

我有一个 Web 应用程序，成功登录后，用户将被重定向到仪表板页面：https://abc.pro/dashboard。初始访问和重定向工作正常，但当我刷新仪表板页面时，会导致 404 Not Found 错误。

以下是一些要点：

基本 URL https://abc.pro 工作正常。 即使在刷新 http://localhost:3000/dashboard 后，位于 http://localhost:3000 的本地开发服务器也会按预期运行。 我检查了常见问题，例如损坏的链接、服务器日志和权限，但无法确定根本原因。该问题似乎是生产环境特有的。

任何有关可能导致此问题的原因和潜在修复的建议将不胜感激。

Answer 1

您提供的信息并不完整，但我大概能猜到您遇到的问题。我猜您正在使用

react-router

或类似的基于浏览器的路由库。另外，您还可以使用静态文件服务器，例如 nginx 或类似服务器。

react-dom

的路由功能完全基于浏览器的

history.pushState

。当url的路径发生变化时，不会向服务器发送http请求。 （请参阅MDN - PushState）。所以在你主动刷新之前，网页其实还是

/index.html

。所有对网页元素的改变都是在react中实现的。

当您使用

react-router

更改路径为

/dashboard

时，一旦您主动刷新网页，浏览器就会向服务器请求

/dashboard

。但 React 作为 SPA（单页应用程序）仅提供

/index.html

。服务器上没有

/dashboard/index.html

，因此出现 404 错误。

解决办法是，当Web服务器找不到该url对应的html文件时，直接返回

/index.html

，而不是404错误。

至于为什么在开发环境中不会出现问题，是因为webpack已经帮你完成了这个操作。

以下是常见Web服务器的解决方案：

nginx

server {
    # ...

    location / {
        try_files $uri /index.html;
    }

    # ...
}

express

// before app.listen()

app.use((req, res) => {
    res.sendfile(path.join(__dirname, './public', 'index.html'));
})

app.listen(3000)