vue中proxyTable反向代理进行跨域

谁践踏了优雅 2021-09-15 11:20 332阅读 0赞

一.分析

(一).jsonp的方式

jsonp的局限性：只支持GET方式的HTTP请求，不能解决不同域的两个页面之间如何进行JavaScript调用的问题

(二).proxyTable反向代理

本方法是在自己的浏览器创建一个服务器，然后让自己的服务器去请求目标服务器。而且跨域是针对JavaScript来说的，JavaScript 是插入HTML页面后在浏览器上执行的脚本。服务器之间是可以随便请求数据而不受限制的。我们通过自己创建的服务器去请求目标服务器，然后在从我们客户端去请求我们自己创建的服务器，这就不存在跨域了。

有关于API proxy的说明，使用的就是这个参数，[请查看][Link 1]

二.案例使用

获取的数据接口是：

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

(2).获取网上的数据

[音乐盒][Link 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

![70][]

[Link 1]: https://vuejs-templates.github.io/webpack/proxy.html
[Link 2]: http://ustbhuangyi.com/music/#/recommend
[70]: /images/20210813/2a7ff35006594de68e0110661da17776.png