现在项目一般都进行前后端分离了。前后端服务器都不在一起,开发环境下,当协议、子域名、主域名、端口号中任意一个不相同时,算不同域,这个时候会出现跨域问题。
1.在config下index.js中proxyTable加上:
proxyTable: {
'/api': { // 要代理的接口名
target: 'http://39.108.102.200/', // 要代理的后台接口地址
changeOrigin: true, // 允许跨域
pathRewrite: {'^/api': ''} // 接口名重写
}
}
2.去main.js中配置
import axios from 'axios'
Vue.prototype.HOST = '/api'
Vue.config.productionTip = false
3.功能页面请求接口
axios({
method: 'get',
url: this.HOST + `接口`,
}).then((res) => {
console.log(res)
})
注意:这是在开发环境下的配置,生成环境下可以会Nginx反向代理