Vue利用axios发送请求并代理请求的实现代码
由于浏览器的同源策略,发送请求时常常遇到跨域问题,一种解决办法是让后端配置跨域,还有一种就是使用代理(与前端工程一起启动,同一个端口),因为代理不是通过浏览器发送的,所以不受同源策略的限制
服务器代码
用SpringBoot工程(端口为8082)简单写了一个Controller层,用于·接收前端发来的请求,并返回数据,前端请求
http://localhost:8082/students 时会返回学生列表数据,访问 http://localhost:8082/cars 时会返回汽车列表数据
import com.example.pojo.Car; import com.example.pojo.Student; import org.springframework.web.bind.annotation.CrossOrigin; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.RestController; import java.util.List; @RestController public class TestController { private List<Student>studentList=List.of( Student.builder().id("001").name("张三").age(Short.valueOf("18")).build(), Student.builder().id("002").name("李四").age(Short.valueOf("19")).build(), Student.builder().id("003").name("王五").age(Short.valueOf("20")).build() ); private List<Car>carList=List.of( Car.builder().id("001").name("奥迪").price(100000F).build(), Car.builder().id("002").name("玛莎拉蒂").price(500000F).build(), Car.builder().id("003").name("奔驰").price(300000F).build() ); @GetMapping("/students") public List<Student>getStudentList(){ return studentList; } @GetMapping("/cars") public List<Car>getCarList(){ return carList; } }
前端代码
通过配置代理进行请求的转发,实现跨域访问,在vue.config.js文件中配置如下代码
const { defineConfig } = require('@vue/cli-service') module.exports = defineConfig({ transpileDependencies: true, //开启代理服务器 devServer:{ proxy: { '/api': { target: 'http://localhost:8082/', // 你想要代理到的地址 pathRewrite: { '^/api': '/' // 重写路径,将 /api 替换为 / } } } } })
通过axios发送请求,先在终端输入 npm i axios 引入axios的依赖包,然后通过一下代码发送请求
axios.get("/api/students") .then( //请求成功的回调函数 response=>{ this.studentList=response.data }, //请求失败的回调函数 err=>{ alert(err.message) } )
到此这篇关于Vue利用axios发送请求并代理请求的文章就介绍到这了,更多相关Vue axios发送请求内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
启动myvue报错npm ERR! code ENOENT npm ERR! syscall open的解
这篇文章主要介绍了启动myvue报错npm ERR! code ENOENT npm ERR! syscall open的解决办法,文中给出了详细的解决方法,并通过图文结合的方式介绍的非常详细,需要的朋友可以参考下2024-03-03ElementUI之表格toggleRowSelection选中踩坑记录
这篇文章主要介绍了ElementUI之表格toggleRowSelection选中踩坑记录,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03vue+Vue Router多级侧导航切换路由(页面)的实现代码
这篇文章主要介绍了vue+Vue Router多级侧导航切换路由(页面)的实现代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2018-12-12vuex中数据持久化插件vuex-persistedstate使用详解
这篇文章主要介绍了vuex中数据持久化插件vuex-persistedstate使用详解,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2022-03-03
最新评论