不知道大家在开发过程中, 有没有遇到经常切换后端接口地址?或者要部署上线,刚配置打包好前端包,运维又要修改服务器地址,我们不得不修改服务器地址再次打包...,有小伙伴使用暴露在public下的静态js文件来配置后端IP地址和端口的方法,但我测试发现, js存在异步,有时候会出现js未加载到,http请求就已经发出去的情况,我分享的这个方法, 可以一劳永逸的解决多站点部署问题,而且几乎可以解决任何情况下的跨域.
首先什么是跨域？大家可以查看浪里行舟大佬的分享 九种跨域方式实现原理(完整版)，感谢大佬分享，这里我们主要讨论使用nginx 反向代理解决跨域以及多站点部署的方法。nginx的安装和配置大家可以参考菜鸟教程文章,我们来看项目中该如何使用.
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, 那么我们刚刚的登录请求就在http://192.168.1.10/api/login, 接下来我们要做的, 就是配置nginx, 请看下图:
前端项目打包后放在 /opt/www/ 目录下, 前端服务即nginx服务在服务器的80端口启动, 后端服务器地址在 8000端口, 这样我们就能将服务正确的转发到后台, 如果哪天服务器抽风更换服务器, 只需要运维修改这里的配置即可, 而前端项目, 不需要任何的修改, 当然也不需要打包, 也就是说, 后面的修改服务器这些, 跟前端没有任何关系,完全解除耦合,我们就可以愉快的继续我们的开发,不被运维大哥打扰,当然,如果你们运维是妹子, 请忽略我以上分享.
第一次写文章, 有些啰嗦,请见谅, 小弟才疏学浅, 如有不对的地方欢迎指出, 一定虚心受教.谢谢.