vue配置多个跨域代理

如何配置

1.配置开发环境的baseURL

• 项目根目录下创建 开发环境配置文件.env.development
• 我这里配了两个baseURL，第一个是大部分请求用的，第二个是文件预览的

NODE_ENV=development
VUE_APP_API_BASE_URL='/ncbank'
VUE_APP_PREVIEW_BASE_URL='/kkview' 

2.设置全局的API_BASE_URL，也就是给Vue实例添加属性，方便全局使用

• src/config/index.js ---- 该文件需要在 main.js文件中引入

	import Vue from 'vue'
	// 设置全局的API_BASE_URL --- 这里可以直接通过process.env读取到开发环境或者生产环境的配置内容
	Vue.prototype.API_BASE_URL = process.env.VUE_APP_API_BASE_URL
	Vue.prototype.API_PREVIEW_URL = process.env.VUE_APP_PREVIEW_BASE_URL

3.创建axios实例，设置请求拦截器

• src/utils/request.js

	import axios from 'axios'
	import Vue from 'vue'
	
	let apiBaseUrl = '/ncbank'
	const service = axios.create({
		baseURL: apiBaseUrl,
		timeout: 30000
	})
	
	// 请求拦截器
	service.interceptors.request.use(config => {
		config.baseURL = config.source === 'preview' ? Vue.prototype.API_PREVIEW_URL : Vue.prototype.API_BASE_URL
		// 其他配置就省略了
		// 。。。
	})
	// 响应拦截器
	。。。。

4.封装请求

• 这里以get请求为例 src/api/manage.js

	import { axios } from '@/utils/request'
	
	// 根据发送请求时，根据是否添加(source='preview')参数走不同的代理
	export function getAction(url, parameter, source) {
		return axios({
			url,
			method: 'get',
			params: parameter,
			source
		})
	}

5.配置代理

• 项目根目录/vue.config.js

	module.exports = {
		...
		devServer: {
			port: 3000,
			proxy: {
				'/ncbank': {
					target: 'http://192.168.160.55:8080/ncbank',   // 后端地址
					ws: false,
					changeOrigin: true,
					pathRewrite: {
						'^/ncbank': ''
					}
				},
				'/kkview': {
					target: 'http://192.168.145.234:8012/kkview',   // 后端地址
					ws: false,
					changeOrigin: true,
					pathRewrite: {
						'^/kkview': ''
					}
				}
			}
		}
	}