编程技术分享平台

网站首页 > 技术教程 正文

有时候你的Nginx代理也许就差一个JS脚本

xnh888 2024-09-12 22:44:05 技术教程 25 ℃ 0 评论

背景

最近公司有这么一个需求：

我们公司在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;
}

这样就完美地满足需求了

总结

遇到问题不能钻牛角尖，不能手里拿着锤子满世界看着都是钉子。有时候换一个角度看问题也许会更加海阔天空，有时候多种技术结合更适用于当前问题。

原文链接：记忆旅途

Tags：

猜你喜欢

本文暂时没有评论，来添加一个吧(●'◡'●)

欢迎 你 发表评论:

最近发表
标签列表
Copyright Your WebSite.Some Rights Reserved.