有时候你的Nginx代理也许就差一个JS脚本
背景
最近公司有这么一个需求：
我们公司在www.test.com上做了一个官网的页面，但我们公司的官网域名是www.jylt.cc，而www.test.com网站不能配置通过我们官网的域名直接访问，但是我们又需要直接通过www.jylt.cc来访问www.test.com上我们的官网内容。
问题的发生
这时我想到了使用Nginx直接把www.jylt.cc的请求代理到www.test.com上，这样不就解决问题了嘛。有了思路就开干。
方案1
在www.jylt.cc指向的服务器配置Nginx，配置如下：
location / {
proxy_pass www.test.com;
}
重启Nginx，通过浏览器访问www.jylt.cc,但是出乎意料，网页内容展示的是www.test.com网站首页而不是我们的官网内容。后来发现，在访问我们官网的时候需要写的网址是www.test.com/#/appView/121/138，原来后面还需要我们官网应用的信息……所以必须通过www.jylt.cc/#/appView/121/138才可以访问我们自己域名的官网。但是作为官网让用户通过这么一长串网址去访问显然是不现实的，很不利于官网的推广和易用。
方案2
我后来发现了一个规律：官网首页是www.test.com/#/appView/121/138，二级页面网址类似www.test.com/#/appView/121/246?id=17，也就是二级页面会比首页面多了一个id的参数，发现这个规律的我很是欣喜，马上修改Nginx配置文件：
location / {
if ($arg_id = "") {
rewrite ^ www.jylt.cc/#/appView/121/138;
}
}
location /appView {
proxy_pass www.test.com;
}
心想着，这样在只输入www.jylt.cc的时候，因为没有id参数，这样就直接重定向到www.jylt.cc/#/appView/121/138，然后通过www.test.com进行代理；如果访问的是二级页面，因为有了id参数，这样直接代理到www.test.com。想想感觉是完美的。但实际使用时，通过www.jylt.cc访问，页面空白的……
经过各种排查之后，才知道，Nginx其实是获取不到url井号之后的内容的，也就是说$arg_id = ""恒为true，location /appView 是永远不会匹配到的。
方案3
既然Nginx获取不到井号之后的内容，那么在井号之前加上需要匹配到的内容不就行了吗？
location / {
rewrite ^ www.jylt.cc/lt/#/appView/121/138;
}
location /lt {
proxy_pass www.test.com;
}
这样的话输入www.jylt.cc，会重定向，然后匹配到 /lt，代理到www.test.com。重启Nginx，测试输入www.jylt.cc，果然和预期一样，URL重定向到了www.jylt.cc/lt/#/appView/121/138，展示出了我们的官网内容。本以为万事大吉，结果老板看了说首页的URL还是太长了，需要首页只展示www.jylt.cc，后面的一系列参数都不需要展示。这么一说可真要了我的老命了，本就稀少的头发更是雪上加霜，没办法硬着头皮也得做呀。
思来想去，猛然间灵光一现：既然Nginx获取不到#后面的参数，无法区分当前的URL是首页链接还是二级页面链接，但是前端可以区分出来呀，何不用iframe把首页嵌入到www.jylt.cc下呢？这么一想思路瞬间开阔了许多。
终极大招
既然JS可以，那就开干，首先得写一个HTML文件：
<html>
<head>
</head>
<body>
<iframe id="iframe" src="https://www.jylt.cc/lt/#/appView/121/138"></iframe>
</body>
</html>
<script src=".../jquery"></script>
<script>
let href = window.location.href;
if (href.indexOf("#") == -1) {
// 说明是首页
window.location.replace("https://www.jylt.cc/lt/#/appView/121/138");
} else {
let arr = href.split("#");
window.location.replace("https://www.jylt.cc/lt/#" + arr[1]);
}
</script>
Nginx配置：
location / {
root html所在目录;
index html文件名;
}
location /lt {
proxy_pass www.test.com;
}
这样就完美地满足需求了
总结
遇到问题不能钻牛角尖，不能手里拿着锤子满世界看着都是钉子。有时候换一个角度看问题也许会更加海阔天空，有时候多种技术结合更适用于当前问题。
原文链接：记忆旅途