VUE+Springboot项目使用反向代理实现跨域请求的两种方式
使用vue.js+Springboot采用前后端分离的方式开发,当需要前后端联调时,由于前后端单独部署,主机ip或者端口会不同,从而会出现跨域请求的问题,如何进行跨域请求,通过网上提供的方案并实践验证,已知有两种反向代理解决方法。
·
方法1:
利用vue-cli自带的反向代理配置proxyTable,在modules.export中配置如下:
proxyTable: {
'/api': {
target: 'http://localhost:8080',// 请换成你的后端ip地址
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
}
前台利用axios发送ajax请求方法为:
this.$axios({ url: '/getUser',method: 'get',baseURL:'/api'}).then(res=>{
console.log(res.data);});
或者
this.$axios.get("api/getUser").then(res=>{
console.log(res.data);
})
这个设置的方法来自于vue-cli使用的模板插件 vuejs-templates,其作用相当于在本地部署了一个反向代理服务器解决跨域问题,文档里有说明和实例
值得注意的是,方法1只能在开发时使用。
方法2:
前端项目用反向代理工具nginx部署启动,配合nginx的反向代理配置实现跨域访问。
1. 前端项目的build
命令行进入项目根目录下,运行命令:
npm run build
将打包生成dist目录.
2. nginx的配置
server {
listen 8081; //监听端口,因为我再本地8080部署后端,故用8081
server_name localhost 10.45.145.192;
#charset koi8-r;
#access_log logs/host.access.log main;
location / {#/表示匹配访问根目录
#root html;#用于指定访问根目录时,访问虚拟主机的web目录
root D:/VueDemoSites/mi-shop-master/dist; #vue项目build的dist目录
index index.html index.htm;#在不指定访问具体资源时,默认展示的资源文件列表
}
location /api {
rewrite ^.+api/?(.*)$ /$1 break;
include uwsgi_params;
proxy_pass http://localhost:8080;//后端部署ip:端口
}
以上分别为root和前台ajax请求发起时映射的后端ip和端口配置。
ajax请求方式如方法1,启动nginx,用配置的监听端口浏览器访问web,同样可以实现跨域访问。并且可以同时配置多个服务器地址。
更多推荐
已为社区贡献2条内容
所有评论(0)