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

以上配置得到的结果：

第一个会直接请求这个路径：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。

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