跨域请求代理

末蓝、 2021-09-02 09:03 545阅读 0赞

解决问题：在本地了开发中，使用线上的数据。

url的前三个部分的改变，都会产生跨域的问题，所以webpack-dev-server提供了一些配置，可以解决跨域请求的问题

在webpack.config.js中，通过devServer属性来定义webpack-dev-server的配置

host 定义域名

post 定义端口号

open 是否打开浏览器

proxy： 定义请求代理，是一个对象

key 表示请求地址

value 是一个对象，是对该请求的代理配置

target 表示目标地址

pathRewrite 是否重写地址，是一个对象

key是匹配的路径，

value是重写后的路径

secure 是否做https协议校验。

## webpack实现代理跨域 ##

案例 抓取qq音乐中的数据

webpack-config.js中配置请求代理跨域  devServer:

// 配置
    module.exports = {
    	// 解决问题
    	resolve: {
    		// 拓展名
    		extensions: ['.js', '.es'],
    		// vue 入口
    		alias: {
    			vue$: 'vue/dist/vue.js'
    		}
    	},
    	// 入口
    	entry: './es/main.es',
    	// 发布
    	output: {
    		filename: './dist/main.js'
    	},
    	// 模块
    	module: {
    		// 加载机
    		rules: [
    			// es
    			{
    				test: /\.es$/,
    				loader: 'babel-loader',
    				query: {
    					presets: ['es2015']
    				}
    			}
    		]
    	},
    	// 配置服务器
    	devServer: {
    		// 端口号
    		port: 8082,
    		// 打来浏览器
    		open: true,
    		// 请求代理
    		proxy: {
    			// 代理请求
    			'/data/test': {
    				// 目标地址
    				target: 'https://c.y.qq.com/splcloud/fcgi-bin/gethotkey.fcg',
    				// 重写地址
    				pathRewrite: {
    					'^/data/test': ''
    				},
    				// 不要校验https协议
    				secure: false
    			}
    		}
    	}
    }

<div id="app">
    		<h1>app part</h1>
    		<home></home>
    	</div>
    
          import axios from 'axios';
    // 安装
    Vue.prototype.$http = axios;
    
    // 定义组件类
    let Home = Vue.extend({
    	// 模板
    	template: '<h1>home  {
       {msg}}</h1>',
    	// 数据
    	data() {
    		return {
    			msg: ''
    		}
    	},
    	// 组件创建完成
    	created() {
    		// 发送请求
    		this.$http
    			// get请求
    			.get('/data/test', {
    				// query数据
    				params: {
    					g_tk: 5381,
    					loginUin: 0,
    					hostUin: 0,
    					format: 'json',
    					inCharset: 'utf8',
    					outCharset: 'utf-8',
    					notice: 0,
    					platform: 'yqq.json',
    					needNewCode: 0
    				}
    			})
    			// 监听数据返回
    			.then(({ data }) => {
    				// 存储数据
    				this.msg = data.data.special_key;
    			})
    	}
    })
    
    // vue实例化对象
    new Vue({
    	// 注册组件
    	components: { Home },
    	// 容器
    	el: '#app',
    	// 数据
    	data: {}
    })

## vue-cli实现代理跨域 ##

vue-cli3.0搭建的项目，平时访问内部接口配置了拦截器，今天需要调用天气预报的外部接口，发现跨域问题，通过配置代理解决。

1、在vue.config.js中配置代理

module.exports = {
      devServer: {
        proxy: { // 为天气接口配置代理，解决跨域
          '/proxy/': {
            'target': 'https://www.tianqiapi.com', //天气接口地址
            'secure': false, // false为http访问，true为https访问
            'changeOrigin': true, // 跨域访问设置，true代表跨域
            'pathRewrite': { // 路径改写规则
              '^/proxy': '' // 以/proxy/为开头的改写为''
            }
          }
        }
      }
    }

2、然后使用axios调用接口，检测到'/proxy'会替代为https://www.tianqiapi.com，这里实际访问到的接口就是https://www.tianqiapi.com/api，加上参数完整的就是：

https://www.tianqiapi.com/api/?version=v6&cityid=XXX&appid=XXX&appsecret=XXX

axios.get('/proxy/api', { // 这里会匹配到前面我们设置的/proxy，代替为https://www.tianqiapi.com
        params: {
            version: 'v6',
            cityid: XXX,
            appid: XXX,
            appsecret: 'XXX'
        }
    }).then(function (response) {
        console.log(response)
    }).catch(function (error) {
        console.log(error)
    })

3、可以访问了

![686c796c0fb8c54cc809a6265e864970.png][]

[686c796c0fb8c54cc809a6265e864970.png]: /images/20210813/429620dba68e4d60a1675552b31af39e.png