hash模式下前后端路径相同时,nginx如何转发

背景:前期没有进行前后端分离,前端页面由后端转发,即路由的前缀由后端的接口前缀决定;现在想要做到不改变路径做前后端分离且容器化。

  • 前后端分离后,前后端的转发要根据路径前缀做转发,假如项目没有对外开放,内部使用,前端直接在router添加baseUrl,url会自动带上这个路径,以后访问路径需要更改;但是如果项目已经对外使用,修改路径成本太大。下边针对这种情况做处理:
  • 例:后端的接口前缀为portal,nginx内做转发为:
        location /portal/ {
            proxy_pass          http://***/portal/;
        }

nginx的转发方式为:遇到url带portal/的转发到对应容器模块;

  • 前端项目的路由模式为hash时,本来以为nginx的匹配规则改为为 portal/# 时,转发到前端的模块下,实际上失败了,浏览器访问https:///portal/#/pages/login/login 时,实际浏览器只发送了https:///portal/ 到服务器,如下:

    那么这种方法就不可行了, 换个思路想: 浏览器的network下,可以看到前端资源都在portal/static下
    配置nginx为:
       location =/portal/ {
            proxy_set_header    host ingress.front.komect.com;
            proxy_pass          http://**/portal/;

       }
       location ~/portal(.*)static/ {
            proxy_set_header    host ingress.front.komect.com;
            proxy_pass          http://***;
       } 
  1. 第一条:为精确匹配到/portal/时,转发到ingress.front.komect.com的下的portal容器模块
  2. 第二条:将前端js资源的请求转发到前端的portal容器模块下

注意点: 这里新加了跟后端作区分的ingress配置

现在访问 https://***/portal/#/pages/login/login 时,先根据/portal/转发到前端容器模块,接着对静态资源发起请求时,再次转发到portal的前端容器模块,返回前端资源。

额外: 前端容器的nginx配置通用模板:

location /portal {
			if ($request_filename ~* .*\.(?:htm|html)$){
			add_header Cache-Control no-cache,no-store,must-revalidate;
			}
            root /apprun/html/;
            try_files $uri /portal/index.html;
            index index.html index.htm; 
        }
posted @ 2022-06-29 10:01  阿兰儿  阅读(818)  评论(0编辑  收藏  举报