事件起因:
由于公司众多项目需要微信公众号授权,同时又分为测试环境和正式环境,所以每个项目至少需要两个域名在微信公众号后台进行配置,每个公众号只能配置 3 个授权域名,目前公众号已经严重不足,因此需要一个解决方案。
初步设想:
由于之前各个域名都不一样,所以希望整合到一个域名下,通过二级目录的方式访问不同的项目,由于本人纯前端,所以打算用 node+express+request 实现反向代理。通过维护一个 config.js 文件来配置每个二级目录对应需要反代到的域名下。如下:
{
"xxx": "
xxx.test.example.com",
"yyy": "
yyy.test.example.com",
}
此时访问页面
wx-test.xxx.com/xxx 将会把所有资源都反代到
xxx.test.example.com 的域名下。这样只需要在微信后台配置一个
wx-test.xxx.com 一个域名即可(由于其他问题,不希望对旧的域名进行更改,尽量不影响旧的测试域名的使用 以及前端现有的构建方式和当前代码)
遇到问题:
1.由于每个当前每个项目前端访问接口的 url 都是 “/api/xxx/xxx ” 的方式,导致请求时候直接跳过了设置的二级目录,因此无法知道当前接口需要反代到哪个域名下
2.同 1 问题,由于 vue 打包后大部分静态资源的请求 url 为 “/static/xxx/xxx ” ,同样由于请求路径不包含二级目录,无法知道需要反代到的地址
3.api 接口请求 cookie 的 domain 和 path 设置导致 cookie 失效
解决方案:
1.通过获取 requst 的 header 信息里的 referer 获取到发起请求的 url 的二级目录,获取反代地址
2.同上
3.在接口请求后重新编写 cookie 内容
新问题:
通过 header 的 referer 字段可以有效的获取到 /api 和 /static 的文件的二级目录如:/xxx/。但此时一些图片资源如果是从 css 文件里请求的,如 background 里的图片,由于是 css 文件发起的请求,此时的 referer 信息获取的只能是
wx-test.xxx.com/static/xxx/xxx.css 则无法获取到需要的二级目录信息。导致图片资源请求无法知晓需要反代的 url 导致请求失败。
当前解决方案:
通过设置一个全局变量如 domain 在每次有发起反代时在能获取到 referer 的二级目录不为 static 时,将当前的反代域名保存在当前全局变量 domain,当图片资源无法获取到反代地址时,反代到全局变量 domain
此时如果只有一个人访问页面可以实现反代并且微信授权通过,问题是当有几个人同事请求时,会导致 css 文件里请求的静态资源混乱
以上,不知道大家有没有什么解决方案可以解决这个问题(尽量不去改现有各项目的前端代码)