vue中proxyTable反向代理進行跨域

一.分析

(一).jsonp的方式

<script>標籤裡的src是沒有跨域限制的，<img>標籤裡的src也是沒有限制的，我們書寫網頁的過程中不難發現這一點。jsonp就是通過在本站指令碼建立一個<script>便籤，將地址指向第三方的API地址來達到第三方通訊的目的，並提供一個回撥函式來接收資料，第三方響應為json資料的包裝，這個是jsonp名字的由來（json padding）

jsonp的侷限性：只支援GET方式的HTTP請求，不能解決不同域的兩個頁面之間如何進行JavaScript呼叫的問題

(二).proxyTable反向代理

本方法是在自己的瀏覽器建立一個伺服器，然後讓自己的伺服器去請求目標伺服器。而且跨域是針對JavaScript來說的，JavaScript 是插入HTML頁面後在瀏覽器上執行的指令碼。伺服器之間是可以隨便請求資料而不受限制的。我們通過自己建立的伺服器去請求目標伺服器，然後在從我們客戶端去請求我們自己建立的伺服器，這就不存在跨域了。

有關於API proxy的說明，使用的就是這個引數，請檢視

二.案例使用

獲取的資料介面是：

http://localhost:8084/com.ylz.jcjy/HisServlet?CLIENT_SYS_CDOE=WJ&XTKJ00=N&method=JSON&STARTPF_CODE=WJ_LOGININFO_GETLOGININFODATAS

1.config 下面的 prod.env.js

    proxyTable: { //'http://localhost:8080/api/xxx' 代理到 'https://localhost:8084'
   '/api': {
            //target代表源地址
            target: 'http://localhost:8084/com.ylz.jcjy/HisServlet',
            changeOrigin: true, //允許跨域
            pathRewrite: {
                '^/api': ''
            }
        }
    },

2.api/api.js

import axios from 'axios'
//通用引數
export const commonParams = {
    CLIENT_SYS_CDOE:'WJ',
    XTKJ00:'N',
    method:'JSON'
};

export const ERR_OK = 0;


export function WJ_LOGININFO_GETLOGININFODATAS(apiURL) {
	const url = '/api'
	const data = Object.assign({}, commonParams, {
		STARTPF_CODE:apiURL
	});
	return axios.get(url,{
		params:data
	}).then((res)=>{
		console.log(res)
		return Promise.resolve(res.data)
	})
};

3.index.vue

<script>
import {WJ_LOGININFO_GETLOGININFODATAS} from '@/api/api'
export default {
	created() {
		this._getUser();
	},
	methods: {
		_getUser(){
			WJ_LOGININFO_GETLOGININFODATAS('WJ_LOGININFO_GETLOGININFODATAS').then((res) => {
				console.log(res)
			})
		}
	}
}
</script>

(2).獲取網上的資料

音樂盒

歌單的例子：

http://ustbhuangyi.com/music/api/getDiscList?g_tk=1928093487&inCharset=utf-8&outCharset=utf-8&notice=0&format=json&platform=yqq&hostUin=0&sin=0&ein=29&sortId=5&needNewCode=0&categoryId=10000000&rnd=0.1335220255580194

1.config 下面的 prod.env.js

 proxyTable: { 
        '/apis/getDiscLists': {
            //target代表源地址
            target: 'http://ustbhuangyi.com/music/api/getDiscList',
            changeOrigin: true, //允許跨域
            pathRewrite: {
                '^/apis/getDiscLists': ''
            }
        }
    },

2.api/recommend.js

import axios from 'axios'
export const commonParams = {
	g_tk: 1928093487,
	inCharset: 'utf-8',
	outCharset: 'utf-8',
	notice: 0,
	format:'json'
};

export const options = {
	param: 'jsonpCallback'
};

export const ERR_OK = 0;
//獲取全部歌單的資料
export function getDiscList() {
	const url = '/apis/getDiscLists'
	const data = Object.assign({}, commonParams, {
		platform: 'h5',
		uin: 0,//登入的qq號
		needNewCode: 0,
		platform:'yqq',
		hostUin:0,
		sin:0,
		ein:29,
		sortId:5,
		categoryId:10000000,
		rnd:0.1335220255580194

	})
	return axios.get(url,{
		params:data
	}).then((res)=>{
		return Promise.resolve(res.data)
	})
}

3.recommend.vue

<script>
import {getDiscList} from '@/api/recommend'
export default {
	created() {
		this._getRecommend();
		this._getDiscList();
	},
	methods: {
		//獲取 QQ音樂 全部歌單的資料
		_getDiscList(){
			getDiscList().then((res) =>{
				console.log(res)
			})
		}

	}
}
</script>