Vue脚手架配置代理

配置代理

使用 axios 进行前后端交互，现在只是学了一点简单用法。

首先安装 axios 环境，使用命令行npm i axios进行安装，完成之后在 App.vue中引入 axios。

<template>
    <div>
        <button @click="getStudents">获取信息</button>
    </div>
</template>

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

使用 axios 的 get 属性与服务器交互，then 属性表示连接之后要进行的动作，其中response中返回请求成功时的东西，error则返回请求失败之后的提示。

这样配置会出现跨域错误，也就是没有遵循JS 的同源策略，出现跨域问题可能是因为域名不同、端口不同或二级域名不同。

这里我们使用简单的方法，在 vue 前端与后端服务器之间创建一个虚拟的中转服务器，让目标服务器与中转服务器进行通信，这样就不会出现跨域问题

方法一

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

proxy中的地址是目标服务器的地址，使用这种方法，就需要把axios.get中的地址改为代理服务器的地址，因为 vue 是与代理服务器进行交互。

使用这种方法有一个缺点，如果 vue 项目中的 public 文件夹中存在与axios 通信相同的文件，就会直接把这个文件夹下的同名文件返回。而且这种方法只适用于开发阶段，当vue build 完成之后就失效了。

方法二

module.exports = defineConfig({
  // 方式二
  devServer:{
    proxy:{
      '/api1':{//匹配所有以‘/api1’开头的请求路径
			  target:'http://localhost:8889',	//代理目标的基础路径
        pathRewrite:{'^/api1':''}
      },
      
      '/api2':{
        target:'http://localhost:8888',
        pathRewrite:{'^/api2':''}
        ws:true,           //用于支持 websocket
        changeOrigin:true  //用于控制请求头中的 host 值
      }
    }
  }
})

该方法可以配置多个代理，且可以灵活的控制请求是否走代理。但配置有点繁琐，请求资源时必须加前缀。