跨域请求代理

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

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、可以访问了