webpack反向代理的配置说明

反向代理的配置说明

webpack的反向代理, 可以起一个临时的代理服务器, 帮助解决在开发过程中的跨域问题, 就算跨域了也能拿到后台的数据

安装 axios, 发送ajax请求

npm i axios

发送请求

import axios from 'axios'
export default {
  async created () {
    const url = `/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 res = await axios.get(url)
    console.log(res)
  }
}

配置代理 (配置vue.config.js文件)

module.exports = {
  devServer: {
    port: 3000,
    open: true,
    proxy: {
      '/music': {    // 起一个代理地址的名字
        target: 'https://c.y.qq.com/mv/fcgi-bin/',    // 代理的地址
        pathRewrite: { '^/music': '' }   // 路径重写，如果路径有 music，替换为空
      }
    }
  },
  // rem 的配置
  // ....
}