vue2.0项目调用多个IP接口

项目中经常遇到跨域问题，最简单的方式就在本地配置代理。可偶尔遇到一个页面里面需要调用来自两个以上不同IP段的接口，多个IP要怎么配置代理呢？请往下看。

在项目目录 config/index.js文件配置代理

module.exports = {
	...
	  dev: {
		 proxyTable: {
		      '/api': {
		        target: 'http://192.168.17.219:8083', 
		        changeOrigin: true, //是否跨域
		        pathRewrite: {
		          '^/api': ''
		        }
		      },
		      '/moc': {
		        target: 'http://192.156.99.189:8080', 
		        changeOrigin: true, //是否跨域
		        pathRewrite: {
		          '^/moc': ''
		        }
		      },
		    },
	    }
    }

然后我们在进行判断（baseurl.js) 自己创建的文件

//base.js
let baseURL ;
if (process.env.NODE_ENV === 'development') {
  //开发环境
  //这种写法只适合项目中调用一个IP接口的情况
  baseURL = '/api'
  
  //如果调用两个IP接口以上的情况,此处写空，在调用接口的前面添加代理名称来区分代理
   baseURL = ''
  
} else {
  //生产环境
  baseURL = ''
}

然后配置一下axios 请求封装，创建一个http.js文件，引入上面创建的base.js文件

//http.js
import base from '@/utils/base'
.....



//人员管理页面IP
const service = axios.create({
  baseURL:base.baseURL, //属性baseURL 是固定名称，需要注意写法
  timeout: 20000  
})

 ..... 
 //然后将变量导出
export default service

然后在请求接口管理页面（自己创建的api.js文件），并引入http.js文件，在接口前面加上代理的名称

//api.js
import request from '@/con/http' 
//一个接口调用时，可直接拼接 mxk 前缀，但要和config.js定义的一致
export function seeDownloadWeight(data) {
  return request({
    url: '/mxk/weight_manage/view_model',
    method: 'get',
    params: data
  })
}
 
//调用两个接口以上时，接口前面加上代理的名称
let max = '/mxk' //这个要跟你在config.js 代理的名称一样
let api = '/api' 
export function seeDownloadWeight(data) {
  return request({
      //错误写法，代理名称不可跟接口完全融为一体，否则上线后接口名称不一致
    //url: '/mxk/weight_manage/view_model',
    //推荐写法，上线后，只需要把变量置为空就好
    url: max+'/weight_manage/view_model',
    method: 'get',
    params: data
  })
export function seeDownloadWeight2(data) {
  return request({
      //错误写法，代理名称不可跟接口完全融为一体，否则上线后接口名称不一致
    //url: '/mxk/weight_manage/view_model',
    //推荐写法，上线后，只需要把变量置为空就好
    url: api+'/weight_manage/view_model',
    method: 'get',
    params: data
  })
}

如果此方便有改进的地方，欢迎大家留言或私信新浪微博，记得关注噢