Vue使用axios访问Java后端API接口

环境介绍:
前端:Vue自己新建了一个最原始的项目。
后端:SpringBoot搭建的一个简单的增删改查。

首先要确定后端的数据是否能正常的访问
Vue使用axios访问Java后端API接口_第1张图片
可以正常访问的话 进行下一步:

使用axios方法:
1.使用终端工具执行 npm install axios 命令安装axios
2.在/src/main.js文件下加入这两行代码。axios.defaults.baseURL=“改成你后端的地址”

Vue使用axios访问Java后端API接口_第2张图片
3.在/src/components/HelloWorld.vue文件中的script标签中引入下面的代码:
Vue使用axios访问Java后端API接口_第3张图片
4.本以为这样就可以把项目跑起来了 ,结果在控制台报了跨域的错误。在后端Controller层的接口上添加 @CrossOrigin(allowCredentials = “true”, allowedHeaders = “*”) 问题解决。如下图
Vue使用axios访问Java后端API接口_第4张图片
好啦~这样就不报错了。获取成功如下图:
Vue使用axios访问Java后端API接口_第5张图片

你可能感兴趣的:(个人心得)