前言
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' : ''
}
}
}
}
}