vue解决跨域配置webpack的反向代理
在新版vue-cli中,没有直接配置webpack的相关文件。
需要新建一个vue.config.js,官网信息
此文件配置的内容会覆盖掉默认配置。
具体如下:
.js
module.exports={
devServer:{
proxy: {
//将来只要是路径以/music开头,就会被代理到target。
//比如说路径是/music/list/sfads···等等。
//会自动写成:https://c.y.qq.com/mv/fcgi-bin/music/list/sfads···
//因为下面这个/music是我们自己起的名,如果我们不希望未来路径中有music。
//pathRewrite可以把music转成空的或者其他的写法如下。
'/music':{
target: 'https://c.y.qq.com/mv/fcgi-bin/',
pathRewrite: { '^/music' : ''}
},
'/getonenet': {
target: 'http://api.heclouds.com/nbiot',
pathRewrite: { '^/getonenet' : ''}
}
}
}
}
.vue
<template>
<div class="home">
</div>
</template>
<script>
import axios from 'axios' //首先导入axios
export default {
async created(){
const api = `/music/getmv_by_tag?g_tk=5381&loginUin=0&hostUin=0&format=json&inCharset=utf8&
outCharset=GB2312¬ice=0&platform=yqq.json&needNewCode=0&cmd=shoubo&lan=all`
const ref = await axios.get(api)
console.log(ref.data)
const url =`getonenet/resources?imei=00000000&obj_id=0000`
const res = await axios.get(url,{headers: {'api-key': 'sdhfjkshdfhsdfhakdshfahsd='}})//这里配置headers。
console.log(res)
console.log(res.data.data)
}
}
</script>
以上配置得到的结果:
第一个会直接请求这个路径:https://c.y.qq.com/mv/fcgi-bin/getmv_by_tag?g_tk=5381&loginUin=0&hostUin=0&format=json&inCharset=utf8&outCharset=GB2312¬ice=0&platform=yqq.json&needNewCode=0&cmd=shoubo&lan=all
中间并没有music
第二个会直接请求这个路径:http://api.heclouds.com/nbiot/resources?imei=00000000&obj_id=0000
中间也没有getonenet。
你在请求路径中一旦是以getonenet关键字开头的,就会自动在前面加上之前定义好的代理target。
说的乱七八糟反正暂时解决跨域了,也不知道过两天自己还能不能看懂。不懂还是看官网信息吧。