webpack的反向代理配置

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&notice=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&notice=0&platform=yqq.json&needNewCode=0&cmd=shoubo&lan=all

第二个会直接请求这个路径：

http://api.heclouds.com/nbiot/resources?imei=00000000&obj_id=0000

你在请求路径中一旦是以getonenet关键字开头的，就会自动在前面加上之前定义好的代理target。

说的乱七八糟反正暂时解决跨域了，也不知道过两天自己还能不能看懂。不懂还是看官网信息吧。

• 点赞
• 收藏
• 分享
• 文章举报