vue中的代码请求:
//假定:this.api="api";
initList: function () {
this.axios.post(this.api+'/xx/xxx/xxxx', this.qs.stringify({
'pageNo': this.currentPage,
'pageSize': this.pageSize
})).then(res => {
console.log('输出结果:', res);
});
},
一、开发环境(idea+webstorm)跨域
在vue.config.js中作以下配置:
devServer: {
proxy: {
'/api': { //检测到地址中含有api的进行代理
target: 'http://192.168.0.181:8081/web', //代理到的地址
changeOrigin: true, //允许跨域
ws: true,
pathRewrite: {
'^/api': '' //是否需要将地址中的api进行处理替换
}
}
}
二、生产环境(tomcat+nginx)跨域
this.api=“http://192.168.0.181:8082/api”;
需在nginx.conf中配置以下几处:
server {
listen 8082; //配置监听要访问的端口
server_name 192.168.0.181; //服务器地址
##配置跨域
add_header Access-Control-Allow-Origin $http_origin; //配置nginx允许跨域
#charset koi8-r;
#access_log logs/host.access.log main;
#location / {
# root html;
# index index.html index.htm;
#}
#location / {
# try_files $uri $uri/ @router;
# index index.html;
#}
location /sjapi {
proxy_pass http://192.168.0.181:8081/web; //代理地址,根据实际替换
}
}
注意:开发环境的devServer.proxy跨域配置,是不能用于tomcat的