proxy反向代理解决前端跨域问题vue2

前言

proxy解决跨域的原理主要是基于跨域只会出现浏览器与服务器之间，而服务器与服务器之间进行网络请求就不会出现跨域，所以先配置proxy后会将请求发送给本地服务器，再由本地服务器发送给目标服务器，本地服务器获取到数据后再与客户端通信。

客户端

<template>
  <div id="app">
    <button @click="req">proxy按钮</button>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'App',
  methods:{
    req() {
      axios.get('/pre/get').then((res) => {
        console.log(res)
      })
    }
  }
}
</script>

<style lang="less">

</style>

vue.config.js配置

const { defineConfig } = require('@vue/cli-service')
module.exports = {
  devServer: {
    proxy :{
      '/pre' :{//以什么什么开头的请求地址就走代理
        target:'http://localhost:3002',//目标地址
        changOrigin:true,//是否跨域
        pathRewrite:{//重写路径
          '^/pre' : ''
        }
      }
    }
  }
}