不知道大家在开发过程中, 有没有遇到经常切换后端接口地址?或者要部署上线,刚配置打包好前端包,运维又要修改服务器地址,我们不得不修改服务器地址再次打包...,有小伙伴使用暴露在public下的静态js文件来配置后端IP地址和端口的方法,但我测试发现, js存在异步,有时候会出现js未加载到,http请求就已经发出去的情况,我分享的这个方法, 可以一劳永逸的解决多站点部署问题,而且几乎可以解决任何情况下的跨域。
这里我们主要讨论使用nginx 反向代理解决跨域以及多站点部署的方法。
| 序列号 | CPU | RAM | HDD | 带宽 | 售价（美元） | 免费试用 |
|---|---|---|---|---|---|---|
| 香港服务器1 | E5-2620 | 32G | 1T HDD | 50M/无限流量 | $196.00 | 立即申请 |
| 香港服务器2 | E5-2650 | 32G | 1T HDD | 50M/无限流量 | $256.00 | 立即申请 |
| 香港服务器3 | E5-2680 | 32G | 1T HDD | 50M/无限流量 | $316.00 | 立即申请 |
| 香港服务器4 | E5-2690 | 32G | 1T HDD | 50M/无限流量 | $336.00 | 立即申请 |
| 香港服务器5 | E5-2697 | 32G | 1T HDD | 50M/无限流量 | $376.00 | 立即申请 |
| 香港服务器6 | E5-2620*2 | 32G | 1T HDD | 50M/无限流量 | $376.00 | 立即申请 |
| 香港服务器7 | E5-2650*2 | 32G | 1T HDD | 50M/无限流量 | $436.00 | 立即申请 |
| 香港服务器8 | E5-2680*2 | 32G | 1T HDD | 50M/无限流量 | $476.00 | 立即申请 |
| 香港服务器9 | E5-2690*2 | 32G | 1T HDD | 50M/无限流量 | $556.00 | 立即申请 |
| 香港服务器10 | E5-2697*2 | 32G | 1T HDD | 50M/无限流量 | $596.00 | 立即申请 |
| 香港服务器11 | E5-2680v4*2 | 32G | 1T HDD | 50M/无限流量 | $696.00 | 立即申请 |
| 香港服务器12 | E5-2698v4*2 | 32G | 1T HDD | 50M/无限流量 | $796.00 | 立即申请 |
vue项目中, 我们创建Axios实例来发送http请求,并设置axios 初始化参数:
import axios from 'axios';const instance = axios.create({ // 根据实际情况配置线上和线下拦截,注意不填写后端接口的域名和端口号 baseURL: process.env.NODE_ENV === 'production' ? 'api/' : 'api/', timeout: 5000 // 请求超时时间});
注意这里的baseURL不设置后端接口的域名和端口号,这样我们的请求,就会在前端项目启动的服务中发出,开发时我们的请求地址即为 localhost:8080/api/xxx
为什么后端接口并不在localhost:8080, 请求却成功了呢?答案就是我们在vue中使用了webpack的代理方式:
这里配置拦截我们在axios里设置的baseURL = 'api/', pathRewrite的作用是将我们的地址重写到真实的后端地址, 如果后端地址中并没有 '/api'这一层, 我们只需要修改为
devServer: { proxy: { '/api': { // target: 'http://192.168.1.2:8000',//本地调试或者其他局域网内电脑的地址 target: 'https://jhdesign.jingzhidh.com',// 服务器地址 ws: true, changeOrigin: true, pathRewrite: { '^/api': '' // 设置为空表示后端服务接口中并没有/api } } }}
当我们的后端地址修改,我们只需要在proxy里切换服务器地址,重启服务即可(想想我同时对接三个Java后台直连他们的电脑时,这里切换真的很频繁)
以上即为开发环境下的配置, 等到上线是不是还要修改很多?答案是no, 将前端打包后, 前端静态资源放入Tomcat 或者nginx 任何静态服务器下即可, 不需要做任何修改, 因为打包后的代码里,没有写任何关于后端的地址或者端口, 前端在服务器运行起来以后,前端请求就在服务器地址下发出, 比如我们的服务器地址是 192.168.1.10:80, 那么我们刚刚的登录请求就在192.168.1.10/api/login, 接下来我们要做的, 就是配置nginx。
前端项目打包后放在 /opt/www/ 目录下, 前端服务即nginx服务在服务器的80端口启动, 后端服务器地址在 8000端口, 这样我们就能将服务正确的转发到后台, 如果哪天服务器抽风更换服务器, 只需要运维修改这里的配置即可, 而前端项目, 不需要任何的修改, 当然也不需要打包, 也就是说, 后面的修改服务器这些, 跟前端没有任何关系,完全解除耦合,我们就可以继续我们的开发。
