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下請求數據

一、HelloWorld.vue文件

二、網頁刷新控制檯報錯

配置proxyTable請求數據

一、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": ""
				}
			}
		}
	}
}
複製代碼

二、HelloWorld.vue文件

三、瀏覽器控制檯

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。