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>