前端vue 开发中的跨域问题解决，以及nginx 上线部署。（vuedevServer 与
nginx ）
前⾔
最近做的⼀个项⽬中使⽤了vue+springboot 的前后端分离模式
在前端开发的的时候，使⽤vue cli3的devServer 来解决跨域问题
上线部署则是⽤的nginx 反向代理⾄后台服务所开的端⼝
正⽂
开发环境中的跨域
⾸先，要确定后台服务的ip 与端⼝这⾥我的后台开的是
localhost:8081
npm run serve 在8080端⼝
⼀般我们使⽤ajax 请求的时候，会可以把url ip:port/api 写在ajax 请求的url 参数中
("localhost:8081"+ `/bpi/api/DayTradeinfoMarketStatusSearch?ddate=${day}`)
这样，这个请求就是从localhost:8080发向localhost:8081，端⼝不同这就遇到了跨域的问题
vue cli WebpackDevServer 解决跨域的⽅法是通过node 开⼀个服务器进⾏代理。
前台发向后台服务器的请求，先发向node 所开的服务，node 服务器以相同的参数向真正的服务器进⾏请求，再把响应返回给前台。
禁⽌跨域是浏览器的安全策略限制
这⾥有两个误区
nginx部署前端项目1. ✕ 动态请求就会有跨域的问题
✔ 跨域只存在于浏览器端，不存在于安卓/ios/Node.js/python/ java 等其它环境
2.✕ 跨域就是请求发不出去了
✔ 跨域请求能发出去，服务端能收到请求并正常返回结果，只是结果被浏览器拦截了
详情请看
在vue cli3中的配置
在package.json 同级⽬录下新建fig.js ⽂件//fig.js
proxy: {
'/bpi': { // 以'/bpi'开头的请求会被代理进⾏转发
target: 'localhost:8081', // 要发向的后台服务器地址 如果后台服务跑在后台开发⼈员的机器上，就写成 `ip:port` 如 `http:192.168.12.213:8081` ip 为后台服务器的ip changeOrigin: true
}
}
}
}
ajax 请求的写法
(`/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 的时候的路径配置
即vuefig.js ⾥的 publicPath 配置项//fig.js
publicPath:'./', //可以理解成build 出来的index.html 从哪⾥他引⽤的js 、css 等⽂件。默认是"/"从根⽬录寻
devServer: {
hotOnly:true,
disableHostCheck:true,
proxy: {
'/bpi': {
target: '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⽂件夹的f中修改要映射的⽂件夹）
打开f
#f
#只贴了⼀些重要内容上来，其他的配置保持默认就好
http {
server {
listen 8082; //监听的端⼝
server_name localhost;
location / { // 表⽰以'/'开头的请求怎样处理
root html; //指定root⽂件夹为上⾯提到的html⽂件夹
index index.html; //返回index.html
}
location /bpi{ // 表⽰以'/bpi'开头的请求怎样处理
proxy_pass 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
#f
#只贴了⼀些重要内容上来，其他的配置保持默认就好
http {
server {
listen 8082; //监听的端⼝
server_name localhost;
location / { // 表⽰以'/'开头的请求怎样处理
root html; //指定root⽂件夹为上⾯提到的html⽂件夹
index index.html; //返回index.html
}
location /bpi{ // 表⽰以'/bpi'开头的请求怎样处理
proxy_pass localhost:8081; //以同样的蚕⾷向这个地址请求，并返回给客户端
}
error_page 404 /index.html; //404的时候就返回index.html
}
}
404的时候就返回index.html
这样进⼊到index.html后,vue-router再根据地址栏的地址，来决定渲染什么模板，如此⼀来任性的甲⽅再怎么刷新也不会报404啦~~
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
Nginx配置前后端分离项目
« 上一篇
几种前端web应用部署方式比较
下一篇 »
发表评论