前言
最近做的一个项目中使用了vue+springboot的前后端分离模式
在前端开发的的时候，使用vue cli3的devServer来解决跨域问题
上线部署则是用的nginx反向代理至后台服务所开的端口
正文
开发环境中的跨域
首先，要确定后台服务的ip与端口
这里我的后台开的是localhost:8081
npm run serve在8080端口
一般我们使用ajax请求的时候，会可以把url ip:port/api 写在ajax请求的url参数中
this.axios.get("localhost:8081"+ `/bpi/api/DayTradeinfoMarketStatusSearch?ddate=${day}`)
这样，这个请求就是从localhost:8080发向localhost:8081,端口不同这就遇到了跨域的问题
vue cli WebpackDevServer 解决跨域的方法是通过node开一个服务器进行代理。
前台发向后台服务器的请求，先发向node所开的服务，node服务器以相同的参数向真正的服务器进行请求，再把响应返回给前台。
禁止跨域是浏览器的安全策略限制
这里有两个误区
- ✕ 动态请求就会有跨域的问题
✔ 跨域只存在于浏览器端，不存在于安卓/ios/Node.js/python/ java等其它环境
2.✕ 跨域就是请求发不出去了
✔ 跨域请求能发出去，服务端能收到请求并正常返回结果，只是结果被浏览器拦截了
详情请看
我知道的跨域与安全-李银成
在vue cli3中的配置
在package.json同级目录下新建vue.config.js文件
//vue.config.js
module.exports = {
devServer: {
proxy: {
'/bpi': { // 以'/bpi'开头的请求会被代理进行转发
target: 'http://localhost:8081', // 要发向的后台服务器地址 如果后台服务跑在后台开发人员的机器上，就写成 `http://ip:port` 如 `http:192.168.12.213:8081` ip为后台服务器的ip
changeOrigin: true
}
}
}
}
ajax请求的写法
this.axios.get(`/bpi/api/DayTradeinfoMarketStatusSearch?ddate=${day}`) //相比上面的写法，这里吧ip和端口去掉了，这样所发的请求会自动补全为 `localhost:port/api` (port是npm run serve所开的端口)
这样，如果打开浏览器调试工具的network会发现请求依然发向 localhost:8080而不是后台服务的端口8081
但是没得关系，node已经帮你向8081端口请求了数据~
上线的时候使用nginx进行部署
使用npm run build命令打包，得到dist文件夹里面的内容就是静态文件，使用任何一个服务器返回里面的index.html就能在浏览器看到页面。
要注意服务器映射的目录和vue build的时候的路径配置
即vue.comfig.js里的 publicPath配置项
//vue.config.js
module.exports = {
publicPath:'./', //可以理解成build出来的index.html从哪里找他引用的js、css等文件。默认是"/"从根目录寻找
devServer: {
hotOnly:true,
disableHostCheck:true,
proxy: {
'/bpi': {
target: 'http://localhost:8081',
// ws: true,
// port:8083
changeOrigin: true
}
}
},
}
publicPath配置为"./" 时：<script src=js/chunk-vendors.9049ec28.js></script><script src=js/app.379ce736.js></script>
publicPath配置为"/" 时：<script src=/js/chunk-vendors.9049ec28.js></script><script src=js/app.379ce736.js></script>
nginx的配置
把dist中的内容放到nginx安装目录下的html文件夹里（也可以在conf文件夹的nginx.conf中修改要映射的文件夹）
打开nginx.conf
#nginx.conf
#只贴了一些重要内容上来，其他的配置保持默认就好
http {
server {
listen 8082; //监听的端口
server_name localhost;
location / { // 表示 以'/'开头的请求怎样处理
root html; //指定root文件夹为 上面提到的html文件夹
index index.html; //返回index.html
}
location /bpi{ // 表示 以'/bpi'开头的请求 怎样处理
proxy_pass http://localhost:8081; //以同样的蚕食向这个地址请求，并返回给客户端
}
}
}
这样，我们访问localhost:8082的时候，就会把index.html文件返回
虽然network显示接口是发现8082的，但是会反向代理到8081，这样就从后台服务器拿到了数据~~~~
vue部署的时候还剩下一个问题
由于vue开发的是单页面应用（可以看到，一般情况下build出来的dist文件夹里面只有一个html文件）
虽然我们通过vue-router可以实现各种路由，但是在部署之后，页面一刷新就会碰到404错误
这是由于 如果刷新之前 的路由是localhost:8082/bookList/detail ，这样的话刷新之后向服务器请求的是root文件夹下的bookList文件夹下的detail,而不是根目录中的index.html了，这就需要做一点小处理 #error_page 404 /index.html; //404的时候就返回index.html
#nginx.conf
#只贴了一些重要内容上来，其他的配置保持默认就好
http {
server {
listen 8082; //监听的端口
server_name localhost;
location / { // 表示 以'/'开头的请求怎样处理
root html; //指定root文件夹为 上面提到的html文件夹
index index.html; //返回index.html
}
location /bpi{ // 表示 以'/bpi'开头的请求 怎样处理
proxy_pass http://localhost:8081; //以同样的蚕食向这个地址请求，并返回给客户端
}
error_page 404 /index.html; //404的时候就返回index.html
}
}
404的时候就返回index.html
这样进入到index.html后,vue-router再根据地址栏的地址，来决定渲染什么模板，如此一来任性的甲方再怎么刷新也不会报404啦~~