Vue利用axios发送请求并代理请求的实现代码
作者：小李大魔王
在Web开发中,跨域问题是一个常见难题,通常由浏览器的同源策略引起,通过简单配置vue.config.js文件,以及安装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发送请求内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！