(1)在代码端,处理get接口调用时,访问/api+原接口url
mounted() {
this.$http.get('/api/interface/blogs/all').then((response) => {
console.info(response.body)
this.blogs = response.body.blogs
}, (response) => {
console.error(response)
});
},
(2)在开发模式dev中保持Vue.js的代理存在。配置代码如下:
dev: {
env: require('./dev.env'),
port:8088,
autoOpenBrowser:true,
assetsSubDirectory:'static',
assetsPublicPath:'/',
//proxyTable: {},
proxyTable: {
'/api': {
target:'http://跨域目标地址或域名',
changeOrigin:true,
pathRewrite: {
'^/api':''
}
}
},
cssSourceMap:false
}
(3)在nginx的配置文件中加入代理
server {
listen 8080;
server_name 目标主机名;
client_max_body_size 500m
charset utf-8;
root /opt/app/demo; #原应用根目录
#步骤1,把所有的 源地址/api/interface 转换为 源地址/interface
location /api {
rewrite ^(.*)\/api(.*)$ $1$2;
}
#步骤2,把所有的步骤1中转换的 源地址/interface 的请求转发到 目标主机域名/interface
location /interface {
proxy_pass http://跨域目标地址或域名;
}
}
保存配置文件,重启nginx就可以了。