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。