详解vue中配置代理(解决跨域请求)
作者：林代码er
这篇文章主要为大家详细介绍了vue如何通过配置代理来解决跨域请求的问题，文中的示例代码讲解详细，对我们深入学习vue有一定的帮助，感兴趣的小伙伴可以跟随小编一起学习一下
app.vue
<template>
<div>
<button @click="getStudents">获取学生信息</button>
<button @click="getCars">获取汽车信息</button>
</div>
</template>
<script>
import axios from 'axios'
export default {
name: 'App',
methods:{
getStudents(){
axios.get('http://localhost:8080/liners/students').then(
response => {
console.log('请求成功了',response.data)
},
error=>{
console.log('请求失败了',error.message)
}
)
},
getCars(){
axios.get('http://localhost:8080/linerc/cars').then(
response => {
console.log('请求成功了',response.data)
},
error => {
console.log('请求失败了',error.message)
}
)
}
}
}
</script>Vue脚手架配置代理
vue.config.js
module.exports = {
pages:{
index:{
entry:'src/main.js'
}
},
lintOnSave:false,//关闭语法检查
//开启代理服务器(方式1）
/* devServer:{
proxy:'http://localhost:5000'
},*/
}
vue.config.js
module.exports = {
pages:{
index:{
entry:'src/main.js'
}
},
lintOnSave:false,//关闭语法检查
//开启代理服务器(方式1）
/* devServer:{
proxy:'http://localhost:5000'
},*/
}
到此这篇关于详解vue中配置代理(解决跨域请求)的文章就介绍到这了,更多相关vue配置代理内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！