在之前的博客中提到了用nginx来处理前后端跨域问题,用Nginx代理请求,处理前后端跨域 ,虽然解决当时了问题,但是在实际使用中还是不好用,当时应对的只是对单接口的处理,如果一个页面需要调用两个不同接口(对应后台的不同工程)时候就出问题了。出现这种问题的原因跟后端开发人员工程混乱也有关系,比如a项目代码中处理了跨域,b项目在nignx代理上做了跨域处理。而我的处理办法是针对所有的请求在本地都添加 Access-Control-Allow-Origin 为 $http_origin (nignx特有字段,意思是请求域)字段到服务端,单独访问a项目是没问题的,如果在调用a项目的时候同时调用b项目就会报错,浏览器提示 Access-Control-Allow-Origin 字段被写了两次,报错类似下边:
Access to XMLHttpRequest at 'http://localhost:9090/getUser' from origin 'http://a.com' has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header contains multiple values 'http://a.com, *, but only one is allowed.
最简单粗暴的办法是针对后台接口每个做不同的处理,拜托,这tm太麻烦了。。。最后想到了一个问题,我可以用nginx把前端代码和后台代码代理到同一端口,这不就大功告成了吗。。。开始搞起来,nginx配置文件如下:
upstream test01{
server b.com; // 服务器a
}
upstream test02{
server a.com; // 服务器b
}
server {
listen 80; // 将前后端代理到同一端口
server_name localhost;
location /user {
proxy_pass http://test01; // user接口
}
location /role{
proxy_pass http://test01; // role接口
}
...
location / {
proxy_pass http://127.0.0.1:8080; // 前端工程地址,不能是localhost
}
}
注意一个细节,我打注释的地方,必须为127.0.0.1,刚开始的时候我写的localhost,前端项目跑起来的后,访问 http://localhost ,发现本地静态js文件一直pending状态,过好长时间才能访问,这不能忍啊...为啥访问个本地文件都这么慢?难道是我开代理的问题吗?难道是本地hosts文件没有配置localhost吗?就差临门一脚了,就是用不了。。。过了好长时间,我偶然间将localhost修改为127.0.0.1,我重新跑起项目,哈,这酸爽....
现在开发调试问题是解决了,但是强迫症的我,看着后台接口那一堆location很少头疼(代码中我用...省略了),于是我在想能不能把所有的接口地址写一块,省的写那么多相同的 proxy_pass http://test01; ,比如我说我要切换一台服务器测试,我得改那么多的proxy_pass 。。。
最终我用正则改进了这种写法(有的人可能觉得之前的写法清晰,看个人喜好吧?我是强迫症忍不了啊 。。。),改完的配置如下,只需将后台接口location写到一块:
location ~ ^/(user|role|...) {
proxy_pass http://test01; // user接口
}