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中间并没有music

第二个会直接请求这个路径：http://api.heclouds.com/nbiot/resources?imei=00000000&obj_id=0000中间也没有getonenet。

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

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