nginx 转发vue hash模式出现301

现象

今天使用nginx将一个公网http服务转换为https时,因为vue使用的hash模式导致转发异常,NGINX响应码301。

NGINX转发配置
location /share {
		    proxy_set_header Host $host;
			proxy_set_header X-Real-IP $remote_addr;
			proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
			proxy_set_header X-Forwarded-Proto $scheme;
			proxy_pass http://127.0.0.1/qanything/#/bots/share;
		}

上网搜索了一下原来是因为NGINX配置反向代理时,如果地址包含#,那么这部分地址就不会被正确转发出去。

解决思路

既然NGINX转发配置不能直接写包含#的地址,那么就通过外部访问NGINX,NGINX对地址进行切割替换的方式来实现这一个需求

修改后的NGINX配置
location /qanything/ {
		    proxy_set_header Host $host;
			proxy_set_header X-Real-IP $remote_addr;
			proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
			proxy_set_header X-Forwarded-Proto $scheme;
			proxy_pass http://127.0.0.1/qanything/#/bots/share;
		}

重启NGINX,然后访问地址,转发成功。

更多推荐