前端vue开发中的跨域问题解决,以及nginx上线部署。(vue devServer与nginx)

前言

最近做的一个项目中使用了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服务器以相同的参数向真正的服务器进行请求,再把响应返回给前台。

禁止跨域是浏览器的安全策略限制

这里有两个误区

  1. ✕ 动态请求就会有跨域的问题

    ✔ 跨域只存在于浏览器端,不存在于安卓/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啦~~

上一篇:tp中session用来做权限方法 (缓解mysql压力)


下一篇:自然语言处理(二十九):Transformer与BERT常见问题解析