服务器问答

如何绕开 browser router 中不存在路由?
0
2021-05-19 20:58:07
idczone

背景

Angular 的单页应用中因为有用到锚点,所以只能用 browser router。假设目标地址为 app.com/target1。

问题

在访问 app.com/target1 时,路由跳转到 app.com/target1/target2, 刷新页面后 404。

相关配置如下:

server {
  listen 4300;
  server_name business;

  location / {
    try_files $uri $uri/ /index.html;
    root tempPath/dist/;
  }
}

server {
  listen 80;
  server_name entry;
  root tempPath/;

  location ^~ /business {
    proxy_pass http://localhost:4300;
  }
}

尝试的解决方法

  1. 关键字搜了 browser router with nginx,看到的都是用 try_files $uri $uri/ /index.html。我试着把最后一个参数改成 app.com/target1 所在的物理路径,也就是 tempPath/dist/,错误日志会说:rewrite大带宽服务器 or internal redirection cycle while internally redirecting to "/index.html" 。后来想想,逻辑上确实是循环,此路不通。

  2. 从页面物理层面解决。就是每个路由都写个 html,但这真的很麻烦...

希望获得帮助的点

希望能在 1 的方向上给点建议。看上去只要在匹配到 /business 时停下来,直接转发到 html 入口就能解决了...


直接在 80 端口下面 try_files 不行么,为啥还要再转一下?

80 端口得监听很多像这样的 app,有 app.com/target1,有 app.com/target2,我希望能写得更清晰一点就转了。实际上直接在 80 try_files 报的错跟正文里的写法报的错是一样的。

我一般是这样写的,参考一下:
```
location /app/web/ {
alias /app/web/;
index index.html index.htm;
add_header Cache-Control no-cache;
gzip_static on;
try_files $uri /app/web/index.html;
}
```

约定一种 url 模式,访问这种模式的 url 都 fallback 到 html 入口文件,location 跟 router 的 basename 对应起来
最后,如果你的 js,css 什么的跟 html 在同一个 location 里,记得上面约定的 url 模式不要跟访问 js/css 的 url 模式冲突

是说 nginx 一层路由,入口 html 一层转发,app 一层路由,这样吗?好吧,如果是这样,那在只改 nginx 层面上估计是没办法了。
感谢回复。

呃,没别的嘲讽的意思,你的回答的确是能绕开 nginx 的路由匹配。我原先的表达也有问题,我本来是以为只改 nginx 的配置就能实现这类路由的,只是我没翻到文档...

我说的就是 nginx 啊,当然,不能光改 nginx,还需要用配合的 webpack publicPath,和 browserRouter 的 baseName
nginx 配置如下
```
location map 应该要以 /结尾
location /your/desired/path/ {
alias $your_web_dir_root;
without a dot
location ~ ^[^.]*$ {

try_files your_html_file.html =404;
}
}
```

数据地带为您的网站提供全球顶级IDC资源
在线咨询
专属客服