Vue-代理配置&&axios二次封装

---

代理配置

在Vue框架中，我们使用相对网络路径去请求我们后端服务器时，会存在跨域，
因为打包时自动给我们生成了服务器，去请求我们自己的后端服务器时，会导致端口不对从而跨域。
如何解决呢?
方法一：后端egg中配置跨域服务。具体参考跨域解决方案
方法二：代理配置

//vue.config.js文件中配置
 devServer: {
 	port: 8080, //默认vue脚手架配置就8080
 	//代理配置
 	proxy: {
 		'/server': {
 			target: 'http://localhost:7001',
 			secure: true, //如果代理的target是https接口,需要配置它 
 			pathRewrite: {
 				'^/server': '/'
 			}, 
 			//请求时重写pathname: 
 			//项目组件中请求的是http://localhost:8080/server/ajax1
 			//8080服务器就会帮我们代理请求 http://localhost:7001/ajax1
 			
 			//如果项目组件中请求的是http://localhost:8080/app/ajax1 那么proxy就检测不到 就不会做代理
 		},
 	},
 }

配置好了我们就可以跨域请求我们的后端服务器了

//父组件App.vue文件中
<template>
  <div v-cloak class="App">
    <button @click="fn">点击请求后端ajax1</button>
    <h1>{{data.name}}{{data.age}}</h1>
  </div>
</template>
<script>
import axios from "axios"
export default {
  data() {
        return {
          data:{}
        }
      },
      methods: {
      async fn(){
           let shuju=await axios('/server/ajax1') 
           this.data=shuju.data
           console.log(this.data)
         }
      },
}
</script>

点击时：

axios二次封装

为了省略每次请求时都需要添加代理配置的api 例如axios(‘/server/ajax1’)
此时需要对axios进行二次封装
要使每个子组件都能使用axios,需要在组件的原型链上配置axios工具,并配置公共网址

main.js文件中:
 import axios from "axios"
 Vue.prototype.$axios=axios
 Vue.prototype.$axios.defaults.baseURL="http://ip:8080/api" 

组件中使用this.$axios进行请求

let shuju=await this.$axios('/ajax1')