Vue 配置代理详情

<template>
  <div>
    <button @click="getBookInfo">获取书籍信息</button>
  </div>
</template>

<script>
import axios from "axios"
export default {
  name: 'App',
  methods:{
    getBookInfo(){
      axios.get("http://localhost:8080/downloads/data.json").then(
          response =>{
            console.log("请求成功了",response.data);
          },
          error => {"请求失败了",error.message}
      )
    }
  }
}
</script>

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave:false,
  //开启代理服务器
  devServer: {
    proxy: 'http://localhost:8080'
  }
})

devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        pathRewrite:{'^/api':''},
        ws: true,
        changeOrigin: true
      }
    }
  }

devServer: {
    proxy: 'http://localhost:8080'
}

devServer: {
    proxy: {
      '/api': {//匹配所有以/api开头的路径
        target: 'http://localhost:8080',//代理目标的基础路径
        pathRewrite:{'^/api':''},//路径重写，匹配api开头的字符串，并把api替换为空字符串
        ws: true,//用于支持websocket
        changeOrigin: true//请求来自于。即控制请求头中host数据。默认为true说谎:来自8080;false如实回答来自代理服务器8081
      }
    }
  }