解决问题:在本地了开发中,使用线上的数据。
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、可以访问了