vue跨域 使用 http-proxy-middleware 代理解决（项目使用vue-cli3.0搭建）

vue跨域 使用 http-proxy-middleware 代理解决（项目使用vue-cli3.0搭建）

最近在模仿用Vue来搭建一个音乐播放器，用的是最新Vue.cli3来进行搭建的，要从QQ音乐来获取数据，那在之前的方法是用node的express框架起了一个服务设置了跨域，这种方法适用于vue2.x，那么在vux.3.0中呢，项目结构的目录是这样滴

所以呢，不能像在vue2.0里面有个build文件里面，写一些对应的跨域请求，需要在项目根目录里面重新写一个config.js文件，具体的可以看看官方文档

那么直接说方法了，(这是用来个人记录的…还说那么多屁话ε=(´ο｀))))*

首先，需要下载http-proxy-middleware，创建一个server.js文件，代码如下

const express = require('express');
const proxy = require('http-proxy-middleware');

const app = express();
app.use('/static', express.static(`${__dirname}/static`));
app.use('/api/getDiscList', proxy({
  target: 'https://c.y.qq.com/splcloud/fcgi-bin/fcg_get_diss_by_tag.fcg',
  changeOrigin: true,
}));

app.get('/*', (req, res) => {
  res.sendFile(`${__dirname}/index.html`);
});
app.listen(8080);

其次，在config.js里面写对应的配置代码

module.exports = {
  devServer: {
    port: '8089', // 端口号设置
    proxy: {
      '/api/getDiscList': {
        target: 'https://c.y.qq.com/splcloud/fcgi-bin/fcg_get_diss_by_tag.fcg', // target host
        ws: true, // proxy websockets
        bypass: function (req, res, proxyOptions) {
          req.headers.referer = 'https://c.y.qq.com/'
          req.headers.host = 'c.y.qq.com'
        },
        changeOrigin: true,  // needed for virtual hosted sites
        pathRewrite: {
          '^/api/getDiscList': ''  //rewrite path
        }
      },
    }
  },
}

最后，写相对应的aixos请求数据的代码就行啦

export function getDiscList() {
  const url = 'api/getDiscList';
  const data = Object.assign({}, {
    g_tk: 5381,
    notice: 0,
    inCharset: 'utf8',
    outCharset: 'utf-8',
    platform: 'yqq',
    hostUin: 0,
    sin: 0,
    ein: 29,
    sortId: 5,
    categoryId: 10000000,
    needNewCode: 0,
    rnd: Math.random(),
    format: 'json'
  });

  return axios.get(url, {
    params: data
  }).then(res => {
    return Promise.resolve(res.data)
  })
}

现在就可以拿到快乐的数据啦

这个方法是用来自己记录的，希望能帮到一些同学，写的不咋样多谅解哈，靴靴