vue/cli 3.x配置proxyTable跨域

官网：vue/cli官网

使用vue/cli创建项目

命令：vue create vuedemo（vuedmeo为项目的文件夹） 。

初始化的项目目录

在根目录下创建vue.config.js文件

//vue.config.js
module.exports = {
	
}

安装vue-resource

命令：npm install vue-resource

在main.js引入resource并使用

//main.js
import Vue from 'vue'
import App from './App.vue'
import Resource from 'vue-resource';

Vue.use(Resource); //使用resource

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

尚未配置proxyTable下请求数据

1、HelloWorld.vue文件

2、网页刷新控制台报错

配置proxyTable请求数据

1、vue.config.js配置

//vue.config.js
module.exports = {
	devServer: {
		port: 8080,
		
		host: "localhost",
		
		https: false,
		
		// 自动启动浏览器
		
		open: false,
		proxy: {
			"/api": {
				target: "http://typhoon.zjwater.gov.cn", //设置调用的接口域名和端口
				changeOrigin: true, //是否跨域
				ws:true,
				pathRewrite: {
					"^/api": ""
				}
			}
		}
	}
}

2、HelloWorld.vue文件

3、浏览器控制台

vue.config.js参数

proxy对象

proxy: {
			"/api": {
				target: "http://typhoon.zjwater.gov.cn", //设置调用的接口域名和端口
				changeOrigin: true, //是否跨域
				ws:true,
				pathRewrite: {
					"^/api": ""
				}
			}
		}

"/api"就是代替target的值（typhoon.zjwater.gov.cn），那么我们在请求数据时的url为

this.$http.get("/api/Api/TyphoonList/2019").then(res => {
			console.log(res);
		})

转换后

this.$http.get("http://typhoon.zjwater.gov.cn/Api/TyphoonList/2019").then(res => {
			console.log(res);
		})

即是/api代替http://typhoon.zjwater.gov.cn。